JS Event Delegation
In this page:
What Is Event Delegation?
Event delegation lets one parent handle events from many child elements. It uses event bubbling. Because bubbling carries the event up through every ancestor, a single listener on a shared parent can inspect event.target to figure out which specific child was actually interacted with.
Example: What Is Event Delegation?
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
document.getElementById("list").addEventListener("click", (e) => {
console.log("Clicked:", e.target.textContent);
});
</script>Why Use Event Delegation?
Delegation reduces the number of event listeners. It is useful for lists and other dynamic content. Attaching one listener to a container instead of one per child item scales better and uses less memory, especially for long or frequently-changing lists.
Example: Why Use Event Delegation?
<ul id="list">
<li>A</li><li>B</li><li>C</li>
</ul>
<script>
document.getElementById("list").addEventListener("click", (e) => console.log(e.target.textContent));
</script>Handling Dynamic Elements
A delegated listener also works for elements added after the listener was created. This is one of delegation's biggest practical advantages: you don't need to re-attach listeners every time new elements are inserted into the delegated container.
Example: Handling Dynamic Elements
<ul id="list"><li>Old Item</li></ul>
<script>
const list = document.getElementById("list");
list.addEventListener("click", (e) => console.log("Clicked:", e.target.textContent));
const newItem = document.createElement("li");
newItem.textContent = "New Item";
list.appendChild(newItem); // still handled by the same listener
</script>Using closest()
The closest method helps find the nearest matching ancestor when an event starts on a nested element. Since the actual click target might be a nested element rather than the item itself, closest() reliably walks up to find the enclosing element you actually care about.
Example: Using closest()
<ul id="list">
<li><span>Item</span></li>
</ul>
<script>
document.getElementById("list").addEventListener("click", (e) => {
const item = e.target.closest("li");
console.log(item.textContent);
});
</script>Practical Delegation
Event delegation is a good choice when many similar elements need the same event behavior. Delegation is the standard approach for things like a to-do list where items are added and removed dynamically, avoiding constant listener management.
Example: Practical Delegation
<ul id="todo-list">
<li>Buy milk</li>
<li>Walk dog</li>
</ul>
<script>
document.getElementById("todo-list").addEventListener("click", (e) => {
console.log("Task clicked:", e.target.textContent);
});
</script>Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: