Click a button inside a card inside a list, and all three can hear it.
Direct answer
Event bubbling means an event travels from the element where it happened up through its parents. Event delegation uses that: you attach one listener to a parent and check event.target to see which child was clicked. It is efficient and works for elements added later.
Bubbling in action
<ul id="list">
<li>One</li>
<li>Two</li>
</ul>
document.querySelector("#list").addEventListener("click", (event) => {
if (event.target.tagName === "LI") {
console.log("Clicked", event.target.textContent);
}
});
Stopping propagation
child.addEventListener("click", (event) => {
event.stopPropagation();
});
Use it sparingly. It can make other code harder to understand.
Why delegation is useful
- One listener instead of many.
- Works for items added dynamically.
- Less memory use.
Where Teyro fits
Teyro's Interactive Web Pages with JavaScript course turns this into short lessons you can play in a few minutes a day. It has 37 lessons, and you can start free.
The bottom line
Understand bubbling and you can handle events cleanly for lists, menus and tables.
