เหตุการณ์เดือดปุดๆ คือลำดับที่ตัวจัดการเหตุการณ์ถูกเรียกเมื่อองค์ประกอบหนึ่งซ้อนอยู่ภายในองค์ประกอบที่สอง และองค์ประกอบทั้งสองได้ลงทะเบียนฟังสำหรับเหตุการณ์เดียวกัน (เช่น การคลิก) เมื่อเกิดฟองขึ้น เหตุการณ์จะถูกจับและจัดการโดยองค์ประกอบที่อยู่ด้านในสุดก่อน จากนั้นจึงขยายไปยังองค์ประกอบภายนอก
เมื่อจับภาพ เหตุการณ์จะถูกจับภาพโดยองค์ประกอบที่อยู่นอกสุดก่อนและเผยแพร่ไปยังองค์ประกอบภายใน
มาดูตัวอย่างทั้งสองกัน
สำหรับตัวอย่างทั้งสองต่อไปนี้ ให้สร้าง HTML ต่อไปนี้ -
ตัวอย่าง
<div id='outer' style='background-color:red;display:inline-block;padding:50px;'> Outer Div <div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'> Inner Div </div> </div>
1. เหตุการณ์เดือด
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, false); หากคุณเรียกใช้โค้ดด้านบนและคลิกใน div ภายใน คุณจะได้รับบันทึก -
Inner div is clicked Outer div is clicked
2. จับภาพเหตุการณ์
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, true); หากคุณเรียกใช้โค้ดด้านบนและคลิกใน div ภายใน คุณจะได้รับบันทึก -
Outer div is clicked Inner div is clicked
