ehsan5565ahmadi@gmail.com  | +98 991 181 9828

مفهوم اصل Capture در جاوا اسکریپت

مفهوم اصل Capture در جاوا اسکریپت

ما در مقاله قبل (مفهوم اصل bubbling در جاوا اسکریپت) در مورد Event Delegation صحبت کردیم، گفتیم که از دو بخش تشکیل شده است.

که در این مقاله میخواهیم در باره بخش دوم Event Delegation یعنی مبحث Capturing صحبت می کنیم.

خلاصه Bubbling

ما در مقاله قبلی ما ترتیب اجرا شدن کد ها را در اصل bubbling متوجه شدیم؛ برای مرور یکبار دیگه این مراحل رو به صورت خلاصه توضیح میدیم.

به مثال زیر توجه کنید.

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

در قطعه کد بالا ما سه ایونت کلیک برای سه المنت مجزا مشخص کردیم.نجوه اجرای ایونت های کلیک، زمانی که روی تگ p کلیک میکنیم به صورت زیر است :

1- ابتدا ایونت کلیک تگ p اجرا خواهد شد.

2- سپس ایونت کلیک تگ بیرونی (تگ div) اجرا خواهد شد.

3- سپس ایونت کلیک بیرونی ترین تگ یعنی (تگ form) اجرا خواهد شد.

Capturing

این اصل به ندرت استفاده میشه؛ در بعضی موارد میتونه برای ما سودمند باشه.

اصل Capturing دقیقا بر عکس اصل Bubbling عمل میکند؛ یعنی ابتدا ایونت های یکسان از بیرونی ترین تگ رو اجرا میکنه و به سمت المنتی که روی آن کلیک شده است حرکت میکند.

به کد قطعه زیر دقت کنید.

<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

در قطعه کد بالا ما سه تا تگ تو در تو داریم؛ داخلی ترین تگ (p) که درون تگ div قرار گرفته، تگ div هم درون تگ form قرار گرفته است.

میخواهیم برای همه تگ ها صفحه ایونت کلیک ست کنیم، سپس اصل Capturing رو فعال کنیم و بر روی تگ p کلیک کنیم.

برای اینکار به صورت زیر عمل میکنیم.

 for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
  }

در بالا ما اومدیم با استفاده از حلقه For، تمام المنت های صفحه رو سلکت کردیم؛ روی همه این المنت ها ایونت کلیک ست کردیم که زمانی روی آن کلیک شد برای ما نام تگ رو آلرت بده.

حالا اگر دقت کنید در ورودی سوم متد addEventListener ما اومدیم و کلمه true رو قرار دادیم؛ با اینکار ما خاصیت Capturing رو فعال کردیم.(در ادامه روش های فعال کردن این خاصیت رو توضیح خواهیم داد)

اگر پروژه رو اجرا کنیم، روی تگ p کلیک کنیم، خروجی چه خواهد شد؟

نحوه ترتیب اجرای آلرت ها به صورت زیر خواهد بود.

1- آلرت بیرونی ترین تگ (html)

2- آلرت تگ body

3- آلرت تگ form

4- آلرت تگ div

5- در نهایت آلرت تگ p

روش های فعال کردن اصل Capturing

به طور کلی ما میدونی که برای ست کردن ایونت با متد addEventListener سه تا ورودی میتونیم وارد کنیم.

element.addEventListener(‘click’,function(), {})

بخش اول که نوع ایونت رو مشخص میکنه که ما در اینجا ایونت کلیک قرار دادیم.

در بخش دوم تابع ارسالی هست که زمانی این ایونت رخ میده تابع مورد نظر اجرا میشه.

ورودی سوم کانفیگ های این ایونت هستن.

برای فعال کردن Capturing ما به دو روش زیر میتونیم عمل کنیم.

1- در ورودی سوم ابجکت ارسال کنیم و داخل آن متد capturing رو برابر true قرار بدیم؛ به صورت زیر :

element.addEventListener(‘click’,function(), {capture : true})

2- به جای ارسال آبجکت هم اگر ما فقط کلمه کلیدی true رو قرار بدیم باز هم Capturing فعال خواهد شد؛ به صورت زیر:

element.addEventListener(‘click’,function(), true)

غیر فعال کردن Capturing

غیر فعال کردن این اصل هم دقیقا شبیه Bubbling هست. با متد های stopPropagation ، stopImmediatePropagation میتونیم انجام بدیم.

در مقاله قبل (متوقف کردن Bubbling) به صورت کامل توضیح داده شده است.

خلاصه Bubbling و Capturing

در تصویر بالا میبینیم که :

الف) Event Bubbling زمانی که ایونت روی تارگت مورد نظر(BUTTON) اجرا میشه ایونت ست شده به صورت زیر اجرا میشه (از تارگت به سمت بیرون) :

1- BUTTON

2- DIV

3-BODY

4-HTML

ب) Event Capturing هم میبنیم که ایونت های مورد نظر به صورت زیر (از بیرون به سمت تارگت مورد نظر) اجرا میشه :

1- HTML

2- BODY

3- DIV

4- BUTTON

این دو اصل میتونه به ما در نوشتن کد های بهینه و تمیز کمک زیادی بکنه.

منبع اصلی مقاله سایت

javascript.info

امیدوارم مطالب گفته شده براتون مفید و قابل فهم بوده باشه ❤✌.

مهدی ایلخانی نسب
طراح و توسعه دهنده وب و علاقه مند به چالش برنامه نویسی.

دیدگاهتان را بنویسید

چطوری میتونم کمکتون کنم؟