JavaScript Event Delegation

Written by Swapnil RajaPublished 24 Aug 2026

Event delegation puts one listener on a parent instead of many on its children.

It works because events bubble up from the element that was clicked.

The big win is that it also covers elements added later.

Example

javascript

document.body.innerHTML =
  '<ul id="list"><li>A</li><li>B</li></ul>';

document.getElementById("list").addEventListener("click", function (event) {
  console.log("clicked " + event.target.textContent);
});

document.querySelectorAll("li")[1].click();

PreviousJavaScript Event Bubbling NextJavaScript preventDefault

Example

javascript

document.body.innerHTML = '<ul id="list"><li>A</li></ul>';

const list = document.getElementById("list");
let clicks = 0;

list.addEventListener("click", function () {
  clicks = clicks + 1;
});

const extra = document.createElement("li");
extra.textContent = "B";
list.append(extra);

extra.click();

console.log(clicks);

Example

javascript

document.body.innerHTML =
  '<ul id="list"><li class="item">A</li></ul>';

document.getElementById("list").addEventListener("click", function (event) {
  if (event.target.classList.contains("item")) {
    console.log("item clicked");
  } else {
    console.log("ignored");
  }
});

document.getElementById("list").click();
document.querySelector(".item").click();

Example

javascript

document.body.innerHTML =
  '<ul id="list"><li class="item"><span id="label">A</span></li></ul>';

document.getElementById("list").addEventListener("click", function (event) {
  const item = event.target.closest(".item");
  console.log(item === null ? "outside" : "found the item");
});

document.getElementById("label").click();

Example

javascript

document.body.innerHTML =
  '<div id="bar">' +
  '<button data-action="save">Save</button>' +
  '<button data-action="delete">Delete</button>' +
  '</div>';

document.getElementById("bar").addEventListener("click", function (event) {
  const action = event.target.dataset.action;
  if (action) {
    console.log("running " + action);
  }
});

document.querySelectorAll("button").forEach(function (b) { b.click(); });

Example

javascript

document.body.innerHTML =
  '<ul id="list"><li class="item">A <button class="x">X</button></li>' +
  '<li class="item">B <button class="x">X</button></li></ul>';

document.getElementById("list").addEventListener("click", function (event) {
  if (event.target.classList.contains("x")) {
    event.target.closest(".item").remove();
  }
});

document.querySelector(".x").click();

console.log(document.querySelectorAll(".item").length);

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Event Delegation</title>
</head>
<body>

  <h1>Event Delegation</h1>

  <ul id="list">
    <li class="item">First</li>
    <li class="item">Second</li>
  </ul>

  <button id="add">Add an item</button>

  <p id="out"></p>

  <script>
    const list = document.getElementById("list");
    const out = document.getElementById("out");

    list.addEventListener("click", function (event) {
      const item = event.target.closest(".item");
      if (item) {
        out.textContent = "You clicked: " + item.textContent;
      }
    });

    document.getElementById("add").addEventListener("click", function () {
      const item = document.createElement("li");
      item.className = "item";
      item.textContent = "New item";
      list.append(item);
    });
  </script>

</body>
</html>

JavaScript Event Delegation

Example

What is Delegation?

Syntax

The Problem It Solves

Example

Checking What Was Clicked

Example

Using closest

Example

Deciding by Action

Example

Removing an Item

Example

Complete Example

Try It Yourself

Important Points

Conclusion