Event Bubbling คือลำดับที่ Event Handlers ถูกเรียกเมื่อ Element หนึ่ง Nested อยู่ใน Element อีกตัว และทั้งคู่ Register 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>
1. 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);
รันโค้ดและ Click ที่ Inner Div จะได้ Log
Inner div is clicked Outer div is clicked
2. 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);
รันโค้ดและ Click ที่ Inner Div จะได้ Log
Outer div is clicked Inner div is clicked
