ตัวจัดการเหตุการณ์หลายตัวบนองค์ประกอบใน JavaScript
หากองค์ประกอบมีตัวจัดการหลายตัวสำหรับเหตุการณ์เดียวกัน แม้จะหยุดการพุ่งขึ้นแล้ว พวกมันทั้งหมดก็จะยังทำงาน นั่นคือ
stopPropagation ป้องกันไม่ให้เหตุการณ์เดินทางต่อไป แต่ตัวจัดการทั้งหมดบนองค์ประกอบปัจจุบันจะยังทำงาน ดูตัวอย่าง:
elem1.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('สีแดง');
});
คุณสามารถทดสอบได้:
