Event Delegation
Use a single listener for dynamic child elements.
Code
JavaScript
document.getElementById("list").addEventListener("click", (e) => {
const item = e.target.closest("[data-id]");
if (!item) return;
console.log("Clicked:", item.dataset.id);
});
// HTML: <ul id="list">
// <li data-id="1">Item 1</li>
// <li data-id="2">Item 2</li>
// </ul>Line-by-line explanation
- 1.Listen on parent; events bubble from children.
- 2.e.target is the clicked element.
- 3.closest() finds nearest ancestor with selector.
- 4.Works for dynamically added elements.
Expected output
Clicked: 1