Event Bubbling và Capturing trong JavaScript

Event Bubbling: Thứ tự gọi handler khi element lồng nhau, cả hai đều listen cùng event. Event được capture và handle bởi element trong cùng trước, sau đó lan truyền (propagate) ra element ngoài.

Event Capturing: Event được capture bởi element ngoài cùng trước, lan truyền vào element trong.

Ví dụ 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 (mặc định)

document.querySelector('#outer').addEventListener('click', e => {
  console.log('Outer div is clicked');
}, false); // false = bubbling phase
document.querySelector('#inner').addEventListener('click', e => {
  console.log('Inner div is clicked');
}, false);

Click vào 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); // true = capturing phase
document.querySelector('#inner').addEventListener('click', e => {
  console.log('Inner div is clicked');
}, true);

Click vào inner div → log:

Outer div is clicked
Inner div is clicked

Flow hoàn chỉnh: Capturing phase (từ window → target) → Target phase → Bubbling phase (target → window). stopPropagation() dừng lan truyền. stopImmediatePropagation() dừng cả handler khác trên cùng element.