Browser: HTML, CSS, DOM, dan Aksesibilitas · 7/8

Event, bubbling, dan delegation

Bagaimana sebuah klik berjalan melewati halamanmu, dan kenapa itu penting nanti di React.

Baca 25 menit

Setelah pelajaran ini kamu bisa

Menjelaskan tiga fase yang dilalui sebuah event
Menjelaskan bedanya bubbling dan capturing
Memakai event delegation, dan menjelaskan kenapa ia lebih skalabel
Memilih dengan tepat antara `preventDefault` dan `stopPropagation`

Klik sebuah button di dalam kartu di dalam list, dan klik itu tidak hanya terjadi pada button-nya. Ia berjalan — turun dari dokumen ke button, lalu kembali naik. Memahami perjalanan itu menjelaskan delegation, dan menjelaskan seluruh sistem event React.

Fase	Arah	Listener yang aktif
1. Capture	document → target	Hanya yang didaftarkan dengan `capture: true`
2. Target	di elemennya sendiri	Semua listener pada target-nya
3. Bubble	target → document	Yang biasa — ini default-nya

Coba sendiri

Propagasi lengkap, diimplementasikan. Ubah `stopAt` untuk melihat apa yang sebenarnya dihentikan stopPropagation.

// The path from the root down to the clicked element.
const path = ["document", "body", "ul.venues", "li.card", "button.save"];

// Listeners: where, which phase, and what they do.
const listeners = [
  { on: "document",  phase: "capture", name: "analytics (capture)" },
  { on: "ul.venues", phase: "capture", name: "delegation (capture)" },
  { on: "button.save", phase: "bubble", name: "the button's own handler" },
  { on: "li.card",   phase: "bubble", name: "card click (bubble)" },
  { on: "ul.venues", phase: "bubble", name: "list delegation (bubble)" },
  { on: "document",  phase: "bubble", name: "close-menus-on-outside-click" },
];

// Set to a node name to stop propagation there; null to let it run fully.
const stopAt = null;

function dispatch(path, listeners, stopAt) {
  const target = path[path.length - 1];
  let stopped = false;

console.log("CAPTURE - travelling down");
  for (const node of path.slice(0, -1)) {
    if (stopped) break;
    for (const l of listeners.filter((l) => l.on === node && l.phase === "capture")) {
      console.log("   " + node.padEnd(12) + l.name);
      if (node === stopAt) { stopped = true; console.log("   ...stopPropagation()"); }
    }
  }

if (!stopped) {
    console.log("TARGET  - " + target);
    for (const l of listeners.filter((l) => l.on === target)) {
      console.log("   " + target.padEnd(12) + l.name);
      if (target === stopAt) { stopped = true; console.log("   ...stopPropagation()"); }
    }
  }

if (!stopped) {
    console.log("BUBBLE  - travelling back up");
    for (const node of [...path].reverse().slice(1)) {
      if (stopped) break;
      for (const l of listeners.filter((l) => l.on === node && l.phase === "bubble")) {
        console.log("   " + node.padEnd(12) + l.name);
        if (node === stopAt) { stopped = true; console.log("   ...stopPropagation()"); }
      }
    }
  }
}

dispatch(path, listeners, stopAt);

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Perhatikan listener bubble terakhir: close-menus-on-outside-click di document. Pola itu ada di mana-mana, dan itu sebabnya satu stopPropagation() yang sembarangan merusak fitur yang tidak berhubungan — listener di document-nya sama sekali tidak mendengar klik itu.

preventDefault versus stopPropagation

Method	Menghentikan	Dipakai untuk
`preventDefault()`	Reaksi bawaan browser	Mencegah form ter-submit atau link berpindah halaman
`stopPropagation()`	Event berjalan lebih jauh	Mencegah handler leluhurnya ikut aktif

// Handle a form in JavaScript instead of a full page reload.
form.addEventListener("submit", (event) => {
  event.preventDefault();          // the browser would navigate otherwise
  save(new FormData(form));
});

// A delete button inside a clickable card: do not also open the card.
deleteButton.addEventListener("click", (event) => {
  event.stopPropagation();         // the card's handler must not fire
  remove();
});

Delegation

Karena event ber-bubble, kamu bisa memasang satu listener di container alih-alih satu per anak. event.target memberitahumu apa yang sebenarnya diklik.

// One listener for a list of any length, including rows added later.
document.querySelector(".venues").addEventListener("click", (event) => {
  // closest() walks up from the target looking for a match.
  const button = event.target.closest("[data-action]");
  if (!button) return;                    // clicked the gap between items

  const card = button.closest(".card");
  const action = button.dataset.action;

  if (action === "delete") remove(card.dataset.venueId);
  if (action === "favourite") favourite(card.dataset.venueId);
});

event.target adalah yang diklik; event.currentTarget adalah elemen yang listener-nya sedang jalan. Menukar keduanya adalah bug yang umum.

Coba sendiri

Pencocokan delegation, dengan `closest()` yang diimplementasikan. Inilah sebabnya satu listener bisa melayani seribu baris.

// The ancestor path of the clicked node, nearest first.
function ancestors(path) {
  return [...path].reverse();
}

function closest(path, predicate) {
  for (const node of ancestors(path)) if (predicate(node)) return node;
  return null;
}

function handleClick(path) {
  const actionNode = closest(path, (n) => n.action !== undefined);
  if (!actionNode) return "ignored - nothing actionable was clicked";

const cardNode = closest(path, (n) => n.venueId !== undefined);
  return actionNode.action + " on venue " + (cardNode ? cardNode.venueId : "?");
}

// Three different clicks inside the same list.
const clickOnDeleteIcon = [
  { tag: "ul" },
  { tag: "li", venueId: 42 },
  { tag: "button", action: "delete" },
  { tag: "svg" },                        // the icon INSIDE the button
];
const clickOnCardPadding = [
  { tag: "ul" },
  { tag: "li", venueId: 43 },
];
const clickOnFavourite = [
  { tag: "ul" },
  { tag: "li", venueId: 44 },
  { tag: "button", action: "favourite" },
];

console.log(handleClick(clickOnDeleteIcon));
console.log(handleClick(clickOnCardPadding));
console.log(handleClick(clickOnFavourite));
console.log("");
console.log("The first click landed on an <svg>, not the button.");
console.log("Without closest(), event.target would be the icon and the handler");
console.log("would do nothing - the single most common delegation bug.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Di console browser, jalankan ini lalu klik di mana pun di halaman: document.addEventListener("click", e => console.log(e.target.tagName, "->", e.currentTarget === document)). Klik sebuah button, lalu klik teks di dalamnya. Perhatikan target-nya berubah tapi currentTarget-nya selalu document. Muat ulang untuk menghapus listener-nya.

Hasil yang diharapkan

Nama tag target berbeda-beda, currentTarget selalu true.

Cek pemahaman

Kamu memakai delegation untuk klik di sebuah list. Pengguna mengklik ikon <svg> di dalam sebuah button. Apa yang harus dilakukan handler-mu?

Membandingkan event.target langsung dengan button-nyaMemakai event.target.closest(selector) untuk naik ke button-nyaMenambahkan pointer-events: none ke setiap ikonMemasang listener di setiap button sebagai gantinya

Pilih jawaban dulu