ใน JavaScript Event Flow process ประกอบด้วย 3 แนวคิด
Event Target - DOM object จริงที่ event เกิดขึ้น
Event Bubbling - อธิบายด้านล่าง
Event Capturing - อธิบายด้านล่าง
Event bubbling คือลำดับที่ event handlers ถูกเรียกเมื่อ element หนึ่ง nested ใน element อีกตัว และทั้งคู่มี listener สำหรับ event เดียวกัน (เช่น click) ด้วย bubbling event จะถูก capture และ handle โดย innermost element ก่อน แล้ว propagate ไป outer elements
ด้วย capturing event จะถูก capture โดย outermost element ก่อน propagate ไป inner elements
มาดูตัวอย่างทั้งคู่
สำหรับทั้งสองตัวอย่าง สร้าง 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>
Event Bubbling
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);รันโค้ดแล้วคลิก inner div จะได้ log
Inner div is clicked
Outer div is clicked
Event Capturing
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);ผลลัพธ์
รันโค้ดแล้วคลิก inner div จะได้ log
Outer div is clicked Inner div is clicked
