Event Delegation in JavaScript

What exactly happens under the hood of a web page when you click on an image, hover over certain elements, or press down on a key? An event occurs. Some common JavaScript events include:

1. click: User clicks on an HTML element
2. mouseover: User hovers over an HTML element
3. mouseout: User hovers off an HTML element
4. keydown: User presses down on a key
5. load: The page has completed loading
6. change: An HTML element on the page has changed

Developers make use of the above user inputs along with the a built-in function called addEventListener() in order to add interactivity to application.

The addEventListener() function is called on a specific EventTarget (referred to as an event target going forward) and the arguments needed are an event type (possibly one of the events listed above) and a listener, in most cases the listener is an anonymous function.

An event target is an HTML element on the page that will be chosen using document.querySelector('<tag#id or tag.class>') and assigned to a variable.

//HTML //
<div id="ramen-menu">
      <!-- Ramen Menu Images-->
    <img class="detail-image" src="./assets/ramen/shoyu.jpg">
</div>
// JavaScript
const ramen = document.querySelector('img')
ramen.addEventListener('click', function (event){ console.log(event.target)
alert("You've clicked on the ramen image!")})

The above example is code for the menu of an imaginary ramen shop. The img tag has been targeted using a querySelector and an event listener was added to the event target.

As instructed, once the image is clicked an alert pops up and the event is logged onto the console. The above was fairly straightforward, but what if the image we are query selecting has not been hard-coded and the element does not exist when the page is initially loaded? What if there are multiple menu items to choose from would we have to create a querySelector andevent listener for each image?

This is where event delegation would come in.

Event Delegation

The core concept of event delegation is to take advantage of a built in mechanism called event propagation, where an event like a click can be ‘heard’ through the multiple layers of a web page. Please see this resource for more information on event propagation.

The basic premise of event delegation is to target HTML elements that will be on the page upon the initially loading as well as choosing the proper parent element to target and attach event listeners to.

For the above example I have refactored the code so that upon initial loading of the menu the <div id='ramen-menu'> tag is empty and the below code is run to fill the page with ramen images stored in a local server.

The menu currently looks like this:

Now, instead of creating a querySelector and event listener combo for each image I will target the parent element <div id='ramen-menu'> and attach an event listener to the entire ramen menu section rather than 1 image.

An analogy to think of when deciding what to target is that ‘parents are responsible for their negligent children.’ Refreshing the web page now adds the functionality stated within the event listener, an alert will pop up when an image on the menu is clicked.

Summary:

Event delegation is used to hand the ‘responsibility’ of listening for certain events to the parent element. When targeting a parent choose one that is loaded onto the page initially and query select that element. Finally, attach your desired functionality with an event listener.

Please see this link for an audio visual of event bubbling as well as these additional docs if you would like to learn more about event bubbling and capture.