Event Capturing چیه؟

این روش برعکس روش Event Bubbling هست. یعنی رویداد ابتدا از تگ بیرونی شروع میشه و به تگ‌های داخلی میرسه. برای اینکار باید آرگومان سوم متد addEventListener رو برابر true قرار بدیم:

document.querySelector('div');
  .addEventListener('click', function() {
    alert("I'm a div");
  }, true);

document.querySelector('p');
  .addEventListener('click', function() {
    alert("I'm a p!");
  }, true);

خب اگه این کد رو اجرا کنیم، مسیر اجرا شدن رویداد برعکس میشه. یعنی اولین alert میگه "I'm a div" و سپس میگه "I'm a p". به بیان ساده‌تر:

گسترش پیدا کردن رویداد توی این روش از المنت بیرونی به سمت المنت داخلی هست.

برای اجرا کردن این کد اینجا رو ببینید.

منبع: