Event Delegation Implementation Examples

Event Delegation Implementation Examples

List Items

document.querySelector("#list").addEventListener("click", (e) => {
  if (e.target.matches(".list-item")) {
    console.log("Clicked:", e.target.dataset.id);
  }
});

Table Rows

document.querySelector("table").addEventListener("click", (e) => {
  const row = e.target.closest("tr");
  if (row) console.log("Row:", row.dataset.id);
});

Menu Items

document.querySelector(".menu").addEventListener("click", (e) => {
  const item = e.target.closest(".menu-item");
  if (item) handleMenuClick(item.dataset.action);
});

Dynamic List

const list = document.querySelector("#dynamic-list");
list.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest("li").remove();
  }
});
// adding new items: no need to add listeners
list.innerHTML += "<li>New item <button class='delete-btn'>Delete</button></li>";

The Takeaway

Examples: list items (e.target.matches), table rows (e.target.closest('tr')), menu items (e.target.closest('.menu-item')), and dynamic lists (works for newly added items). Use closest() to find the relevant parent element when the click is on a child (like a button inside a row).