การเจาะลึกเหตุการณ์ใน JavaScript

นอกจาก bubbling ของเหตุการณ์แล้ว ยังมี capturing (การจับเหตุการณ์) อันที่จริงแล้ว เหตุการณ์จะเคลื่อนที่จากบนลงล่างก่อน (เฟส capturing) ไปถึงองค์ประกอบเป้าหมายของเรา (เฟส target) และหลังจากนั้นจึงเริ่ม bubbling (เฟส bubbling)

เพื่อที่จะติดตั้งตัวจัดการเหตุการณ์โดยคำนึงถึงเฟส capturing ใน addEventListener มีพารามิเตอร์ตัวที่สามซึ่งไม่บังคับ หาก มันมีค่าเป็น true - เหตุการณ์จะทำงาน ในเฟส capturing และหากเป็น false - ในเฟส bubbling (นี่คือค่าเริ่มต้น) มาดูตัวอย่างกัน:

javascriptelem1.addEventListener('click', function() {
  console.log('สีเขียว - capturing');
}, true);
elem1.addEventListener('click', function() {
  console.log('สีเขียว - bubbling');
}, false);

elem2.addEventListener('click', function() {
  console.log('สีฟ้า - capturing');
}, true);
elem2.addEventListener('click', function() {
  console.log('สีฟ้า - bubbling');
}, false);

elem3.addEventListener('click', function() {
  console.log('สีแดง - capturing');
}, true);
elem3.addEventListener('click', function() {
  console.log('สีแดง - bubbling');
}, false);

คุณสามารถทดสอบได้: