ตัวจัดการเหตุการณ์หลายตัวบนองค์ประกอบใน JavaScript

หากองค์ประกอบมีตัวจัดการหลายตัวสำหรับเหตุการณ์เดียวกัน แม้จะหยุดการพุ่งขึ้นแล้ว พวกมันทั้งหมดก็จะยังทำงาน นั่นคือ stopPropagation ป้องกันไม่ให้เหตุการณ์เดินทางต่อไป แต่ตัวจัดการทั้งหมดบนองค์ประกอบปัจจุบันจะยังทำงาน ดูตัวอย่าง:

javascriptelem1.addEventListener('click', function() {
  console.log('สีเขียว');
});
elem2.addEventListener('click', function(event) {
  console.log('สีฟ้า - ตัวจัดการแรก');
  event.stopPropagation(); // หยุดการพุ่งขึ้น
});
elem2.addEventListener('click', function() {
  console.log('สีฟ้า - ตัวจัดการที่สอง'); // จะยังคงทำงาน
});
elem3.addEventListener('click', function() {
  console.log('สีแดง');
});

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