Quy trình Event Flow (Event Bubbling & Capturing) trong JavaScript

Event flow trong DOM có 3 giai đoạn (DOM Level 3 Events):

1. Capturing Phase (Đi xuống): Event từ window → ... → parent → target.
2. Target Phase (Tại target): Event tại element thực sự xảy ra.
3. Bubbling Phase (Nổi lên): Event từ target → parent → ... → window.

Ví dụ minh họa

<div id="outer" style="padding:50px;background:red">
  Outer
  <div id="inner" style="padding:50px;background:yellow">Inner</div>
</div>

Bubbling (mặc định: addEventListener(..., false))

outer.addEventListener('click', () => console.log('Outer'), false);
inner.addEventListener('click', () => console.log('Inner'), false);
// Click inner → log: "Inner" → "Outer"

Capturing (addEventListener(..., true))

outer.addEventListener('click', () => console.log('Outer'), true);
inner.addEventListener('click', () => console.log('Inner'), true);
// Click inner → log: "Outer" → "Inner"

Control flow

• event.stopPropagation(): Dừng bubbling/capturing (vẫn chạy listener khác trên cùng element).
• event.stopImmediatePropagation(): Dừng hẳn, không chạy listener khác trên cùng element.
• event.preventDefault(): Hủy default behavior (link navigate, form submit...).

Best practice: Dùng bubbling (default) cho event delegation (gán 1 listener cho parent xử lý con).