بررسی event propagation در جاوااسکریپت

مفهوم event propagation خیلی ساده و در عین حال کاربردیه و اگر ازش مطلع نباشیم واقعا ازار دهنده خواهد بود

اگر بخوایم به زبان ساده این مفهوم رو توضیح بدیم در واقع وقتی یک ایونتی روی یک المت اتفاق می افته فقط روی همون یه دونه المنت اتفاق نمی افته بلکه توی المنت های والدش هم اتفاق می افته به عنوان مثال به کد زیر دقت کنید.

<div =&quotlog(div)&quot>
    <p =&quotlog(p)&quot>
         This is P element
        <span =&quotlog(span)&quot>
             This is span element
        </span>
    </p>
</div>

با توجه به کد بالا اگر فانکش log رو به صورت زیر در نظر بگیریم

function(text){
    console.log(text)
}

وقتی روی نوشته This is P element کلیک کنیم توقع داریم توی کنسول مقدار "p" رو ببینیم ولی اینطور نیست و ما به ترتیب دو مقدار p و div رو خواهیم دید

دلیلش پدیده ای هست که بهش می گیم event bubbling

تعریف event bubbling

در واقع وقتی یه ایونتی توی صفحه اتفاق می افته (مثلا کلیک) اون ایونت از المنت target (المنتی که ایونت از اون شروع شده) به سمت والد خودش حرکت می کنه تا به document و window برسه و اگر ما برای والد های المنت target ایونت تعریف کرده باشیم همه اون ها اجرا خواهند شد

تعریف event capturing

به برعکس همین پدیده می گن event capturing در واقع مسیر حرکت ایونت ها برعکسه یعنی ایونت از window شروع می شه و به المنت target می رسه

یعنی توی مثال بالا اگر event capturing اتفاق بیفته ما به ترتیب دو مقدار div و p رو خواهیم داشت (ترتیب مهمه)

توی مرورگر ها به صورت پیشفرض event bubbling اتفاق می افته و برای این که بتونیم event capturing داشته باشیم باید ارگومان سوم تابع addeventlistener رو true کنیم به مثال دقت کنید

element.addEventListener(&quotclick&quot, log, true);

و اگر بخوایم کلا event propagation اتفاق نیفته و جلوگیری بشه ازش باید از کد

event.stopPropagation();

استفاده کنیم

امیدوارم مفید باشه :)

آقا داود