Why should you care?

Dynamic lists (100 rows) should not attach 100 separate click handlers.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

<ul id="list">
  <li><button data-id="1">Delete</button></li>
  <li><button data-id="2">Delete</button></li>
</ul>
<script>
document.getElementById("list").addEventListener("click", (e) => {
  if (e.target.matches("button[data-id]")) {
    console.log("Delete", e.target.dataset.id);
  }
});
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Click bubbles from button to ul.
• matches checks the target.
• dataset reads data-id.

Practice next

1. Click delete buttons and log data-id.
2. Add new li dynamically — delegation still works.
3. Try e.stopPropagation on inner clicks.
4. Delegate mouseover on tbody to highlight entire tr.
5. Ignore clicks on disabled buttons with matches("[data-id]:not([disabled])").

Remember

Listen on parent Check e.target Works for dynamic children

ScriptVerse task board

One listener on #board handles clicks for hundreds of draggable task cards added over time.

Outcome: Delegation keeps memory and setup cost flat as lists grow dynamically.