How Does Event Delegation Work in JavaScript

By Jordan Pinski On June 24, 2018
0 Comments
  • HTML
  • |
  • JS
Event delegation in JavaScript

What is event delegation?

Modern web frameworks use event delegation for handling event objects. Event objects are what’s created when an event happens, like a mouse click, key press, etc. On W3C compliant browsers two models, capturing, and bubbling are combined to find the events’ target. The first model, capturing, starts at the window (or <html>) object and captures/searches down to the event target. Once the target is found, the second model, bubbling bubbles/searches up through all of the targets’ ancestors until the window object is found.

(*Note not all events can bubble. You can find out if an event bubbles by reading the W3C specs here)

Let’s look at an example

To better explain how this works let’s use an example. Image an unordered list of items that’s dynamically generated. Your goal is to call a function when each of the list items is clicked. You can’t attach an eventListener to each item because you don’t know if the items exist or not. Instead you attach an event listener to the unordered list element. By doing this an event object will be created for every click on descendants of the unordered list as well as the unordered list element.

HTML

<ul id="list">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

JavaScript

let list = document.querySelector("#list");
list.addEventListener('click', (event) => {
  let target = event.target;
  alert(target.textContent);
});

The first thing that happens on W3C compliant browsers is the Capturing Phase. Event objects are dispatched from the Window object to the targets’ parent. In this case the target’s parent is the list with an id equal to “list”. Once the target is found, the Target Phase begins.

During the Target Phase the event searches down from the parent and finds the target. In this case the target is one of the list items. At this point if the event type indicates that bubbling is false the event object halts. If however the event type indicates that bubbling is true, the Bubbling Phase begins.

During the Bubbling Phase the event bubbles up through all of it’s ancestors until the window object is found.

 

This won’t work on arrays

You’re a JavaScript developer, right? Chances are, over the course of your career you’ve wanted to attach an event listener to each element in an array or node list. You might’ve thought you could just attach the event listener to the array or node list itself. In pure JavaScript you can’t attach an event listener to an array. To accomplish this you can use an arrays’ forEach() method passing a function that adds an event listener to each element in the array.

Understanding how event propagation works in JavaScript can seem confusing at first. Taking the time to understand the intricacies of how a programming language works behind the scenes might not seem important. You can get by without knowing these things, but truly understanding what’s going on will make you a better developer. When a bug arises you’ll have one more tool to help you find & diagnose it.

If you have any questions or comments feel free to leave them in the comment section below. I’ll do my best to answer your questions as soon as possible.

Leave a comment

Your email address will not be published. Required fields are marked *