</>
⌕
Mid #dom#events#bubbling#delegation

Event bubbling, capturing và event delegation là gì?

⚡ Trả lời nhanh

Sự kiện DOM đi qua 3 pha: capturing (từ window xuống target), target, rồi bubbling (từ target lên). Event delegation gắn một listener ở phần tử cha và dựa vào `event.target` để xử lý con, giúp ít listener hơn và hoạt động với phần tử thêm động.

Ba pha

  1. Capturing: từ window xuống phần tử đích (chỉ bắt được với { capture: true }).
  2. Target: tại phần tử đích.
  3. Bubbling: từ đích lên ngược window. Mặc định addEventListener lắng nghe ở pha này.

Delegation

list.addEventListener("click", (e) => {
  const item = e.target.closest("li[data-id]");
  if (!item || !list.contains(item)) return;
  console.log("clicked", item.dataset.id);
});
  • e.target: phần tử thật sự bị click; e.currentTarget: phần tử đang gắn listener.
  • Dùng closest() để xử lý khi click vào phần tử con bên trong (icon, span).
🃏 Ôn bằng flashcard