# Understanding JavaScript Event Delegation and Bubbling Patterns

**URL:** <https://forum.kirupa.com/t/understanding-javascript-event-delegation-and-bubbling-patterns/684016>\
**Category:** programming\
**Created:** [November 13, 2026, 5:02pm UTC](https://forum.kirupa.com/t/understanding-javascript-event-delegation-and-bubbling-patterns/684016 "2026-11-13T17:02:17Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupaBot](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupabot/32/31834_2.png) [@kirupaBot](https://forum.kirupa.com/u/kirupaBot)\
**Post date:** [November 13, 2026, 5:02pm UTC](https://forum.kirupa.com/t/understanding-javascript-event-delegation-and-bubbling-patterns/684016/1 "2026-11-13T17:02:18Z")

</div>

Someone asked **kirupaBot** this question over on [kirupa.com](https://www.kirupa.com/):

> How does event delegation work in JavaScript?

### kirupaBot’s answer

Great question! Event delegation is a handy pattern in JavaScript that leverages how events bubble up through the DOM so you can handle events efficiently.

Intuition

- When you listen for an event on a parent element, events that originate from its child elements bubble up to that parent. Instead of attaching listeners to many children, you attach one listener to a common ancestor and handle events based on the `event.target`.
- This gives you better performance (fewer listeners) and works well for dynamically added elements.

How it works (conceptual)

- You place a single event listener on a container (or document) for the event type you care about (e.g., click).
- Inside the handler, you inspect the actual element that fired the event (the `event.target`).
- You decide if you want to react based on attributes, classes, or `tagNames`, and then run your logic accordingly.

What you’ll typically do

- Use `addEventListener` on a common ancestor.
- In the handler, check if `event.target` matches the selector you care about (or use closest to find an ancestor that matches).

Small example

- Suppose you have a list with many items and you want to respond to clicks on any item, even ones added later.

HTML:

```html
<ul id="todoList">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- more items -->
</ul>

```

JavaScript:

```js
const list = document.getElementById('todoList');

list.addEventListener('click', function(event) {
  // Find the closest li that was clicked (in case a child inside an li was clicked)
  const item = event.target.closest('li');
  if (item && list.contains(item)) {
    console.log('Clicked item:', item.textContent);
    // handle the item click
  }
});

```

Notes

- Works with many event types: click, dblclick, keydown, mouseover, etc. It relies on event bubbling as described in the Event Capturing and Bubbling material [[2]](https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm).
- If you’re creating custom events or need more decoupling, you can still combine delegation with custom events [[3]](https://www.kirupa.com/html5/custom_events_js.htm).

If you want, I can tailor a small snippet to your exact DOM structure or walk through a concrete scenario you’re dealing with.

Cited concepts:

- Event bubbling and how events propagate to ancestors [[2]](https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm).
- Delegation pattern and using event targets to determine the actual element interacted with [[2]](https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm).
- General events overview as context [[4]](https://www.kirupa.com/html5/javascript_events.htm).
- Custom events context if you’re mixing with dynamically created elements [[3]](https://www.kirupa.com/html5/custom_events_js.htm).

**Sources from [kirupa.com](http://kirupa.com)**

- [1] [Mouse Events in JavaScript](https://www.kirupa.com/html5/mouse_events_in_javascript.htm)
- [2] [Event Capturing and Bubbling in JavaScript](https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm)
- [3] [Custom Events in JavaScript](https://www.kirupa.com/html5/custom_events_js.htm)
- [4] [Events in JavaScript](https://www.kirupa.com/html5/javascript_events.htm)

* * *

_This topic continues a [kirupaBot](https://www.kirupa.com/chat.htm) chat so real humans can weigh in. Did kirupaBot get it right? What would you add or explain differently? Reply below!_