อธิบายขั้นตอนการไหลของเหตุการณ์ใน Javascript

ใน JavaScript กระบวนการไหลของเหตุการณ์เสร็จสมบูรณ์โดยสามแนวคิด -

• เป้าหมายกิจกรรม − วัตถุ DOM จริงที่เกิดเหตุการณ์

• เหตุการณ์เดือดปุด ๆ - อธิบายไว้ด้านล่าง

• การจับภาพเหตุการณ์ − อธิบายไว้ด้านล่าง

เหตุการณ์เดือดปุด ๆ คือลำดับที่ตัวจัดการเหตุการณ์ถูกเรียกเมื่อองค์ประกอบหนึ่งซ้อนอยู่ภายในองค์ประกอบที่สอง และองค์ประกอบทั้งสองได้ลงทะเบียนฟังสำหรับเหตุการณ์เดียวกัน (เช่น การคลิก) เมื่อเกิดฟองขึ้น เหตุการณ์จะถูกจับและจัดการโดยองค์ประกอบที่อยู่ด้านในสุดก่อน จากนั้นจึงขยายไปยังองค์ประกอบภายนอก

เมื่อจับภาพ เหตุการณ์จะถูกจับภาพโดยองค์ประกอบที่อยู่นอกสุดก่อนและเผยแพร่ไปยังองค์ประกอบภายใน

มาดูตัวอย่างทั้งสองกัน

สำหรับตัวอย่างทั้งสองต่อไปนี้ ให้สร้าง 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>

เหตุการณ์เดือดพล่าน

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 ภายใน คุณจะได้รับบันทึก -

คลิก div ภายใน

คลิก div ภายนอก

จับภาพเหตุการณ์

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