All About Javascript Event Listeners, Propagation, and Bubbling

Lauren Gifford
Feb 18 · 4 min read

Stay in the loop. Listen to Events.

Web apps written with Javascript have the potential to be amazingly interactive. User actions, a mouse click, a hover, a form submission, a scroll, all have the potential to trigger some code that will perform some work and then manipulate the DOM in response.

However, front-end Javascript code doesn’t know when or how to execute until it is told to do so by a specific event happening on the DOM. The way we tell our Javascript code to run and thus to make something happen on a user’s screen is through event listeners.

You can think of the mechanics of this like the process of listening to a radio. You tune in to a specific station, hear a song or a talk show that you were hoping to catch, then you go do something with that information, sing along, discuss with a friend, etc. Event Listeners follow the same steps.

Steps to Effective Listening

Tune In

First, find the HTML element you want to listen on. Elements should be assigned to global variables and can be placed at the top of the Javascript code file for organization. An element selection statement contains the section of the HTML document to be searched, a selector method, and a CSS selector or specifying attribute as its argument. Some examples of how these might look:

Javascript Selection Code

Hear A Song

Next, determine the type of event you want to listen for. There are a ton of different events that Javascript knows to listen for, the trick is knowing what song you want to listen to. Common event categories include: resource events (load), form events (submit, reset), mouse events (click, hover), keyboard events (keydown, keyup). Once the appropriate element has been selected, and an event determined, addEventListener is the Javascript method we call on the element. This method has two main argument parts:

1) Name of the event
2) Callback Function

Adding Event Listeners

Dance It Out

The final step, the callback function, can be written as a nested anonymous function inside the event listener or can be a designated function fully defined in a separate function. The callback handles the resulting work you want to happen after an event has occurred. The callback also has access to the event object which contains all sorts of valuable data that can subsequently be used to conditionally perform different work or be saved to a variable and sent to a database.

Bubbling

Listening closely vs generally

More properly called event propagation, bubbling refers to the idea that all HTML child elements can be “heard” by their parents, meaning that any event which takes place on an element can be accessed by any one of their ancestor nodes. An event traverses the DOM upwards from its origin until it reaches the node on which the event listener has been placed.

Consider the following set of nested HTML elements.

Sample HTML

We might suppose that in order to respond to a click on the element
<button id=”hello”>Say Hi!</button>, the event listener would need to be connected to that specific button. However, with bubbling, an event listener set on <div id="div1">would achieve the same effect and would have the added benefit of being able to listen for click events located anywhere else on that div or its child elements.

When choosing an element to target with an event listener, it is helpful to keep in mind events that may be going on in the surrounding environment as we may want to listen to and trigger a response to many at once. In this case we can place an event listener on their closest common ancestor instead of on each individual element. This is referred to as Event Delegation.

There are many ways to accomplish the steps involved in event listening and handling. So it mostly comes down to personal preference for exactly how an event goes from occurring to being reflected on the webpage (as long it the desired result is achieved of course).

Just make sure to remember

Bubbles
Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Lauren Gifford

Written by

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store