Mohd Shahid
Shahid's Blog

Shahid's Blog

Interviewer's Favorite: Event Bubbling

Interviewer's Favorite: Event Bubbling

Mohd Shahid's photo
Mohd Shahid
ยทJan 15, 2022ยท

3 min read

Hello everyone ๐Ÿ‘‹

It's been a long time since I published my last article. I got busy in learning deployment, AWS, Docker, Kubernetes, etcetera, which I will share here as well, so be tuned! ๐Ÿ‘€

Today's article is gonna be about 'events', more specifically 'event bubbling'.

Let's get started ๐Ÿš€

Before starting the article I want you to familiarize with the word 'event' in JS. Those who are already familiar can skip the introduction section.

Introduction

What is an event ๐Ÿค”?

One of the most important questions that an interviewer asks around JS and DOM, is about 'events'. When you start learning JS and playing with DOM (Document Object Model), you may hear/read the word 'event', so what is it?
In simple language when a user interact with the webpage in any way like click of a mouse button (left or right), pressing a keyboard button, form submission etc. These interactions are called 'events'.

Why 'events' are important ๐Ÿ’ญ?

If you want to become a better front-end developer or a web developer in general, you really need to understand behind the scenes of what happens when user interacts with the web page.
Almost all the questions in the interview about DOM revolves around 'events'.
Now, when a user do something on the webpage that causes an event to happen you can capture that event and do some specific task accordingly.

What is 'Event Bubbling' ๐Ÿ™„?

With 'event' you will hear/read some more terms like 'Event Capturing', 'Event Propagation', and 'Event Bubbling'. Well, as you already know this article is gonna be about 'event bubbling', which is, without a doubt, is the most important.
Consider the following code snippet. ๐Ÿ‘‡

<div>
  <ul>
    <li></li>
  </ul>
</div>

In the above example if you click on an li element, it will occur as if the click happened on its parent ul and all the other parents above it.
This is because the event bubbles up from the element it happened to all of its parents. It is called event bubbling.
Confusing ๐Ÿ˜ต right?
To visualize this I am creating a simple web page and attaching event listeners to div, ul and li.

<div class="list__container">
  <ul class="list">
    <li class="list__item">List item 1</li>
    <li class="list__item">List item 2</li>                     
    <li class="list__item">List item 3</li>
  </ul>
</div>

This is how it would look in in the inspector ๐Ÿ‘‡

event-bubbling-web-page

Now the magic of JS begins ๐Ÿ’ฅ

const listContainer = document.querySelector('.list__container');
const list = document.querySelector('.list');
const listItems = document.querySelectorAll('.list__item');

// on click changing the item's background color to be red.
listItems.forEach((listItem) => {
  listItem.addEventListener('click', function (event) {
    // `this` referes to the `li` element which was clicked.
    this.style.backgroundColor = 'red';
   });
});

The result ๐Ÿ‘‡

click-on-list

Everything is working as expected right ๐Ÿ‘€? ... Now let's add event listeners to div and ul. ๐Ÿ‘‡

// click event to `div`
listContainer.addEventListener('click', function (event) {
    this.style.backgroundColor = 'yellow';
});

// click event on `ul`
list.addEventListener('click', function (event) {
    this.style.backgroundColor = 'green';
});

The result ๐Ÿ‘‡

change-color-ul-div

๐Ÿคฏ I know you might be thinking, 'Woah, wait Shahid, you never clicked on ul or div why the hell their background color changed ๐Ÿค”?'
The answer is: 'Event Bubbling'.
When you click an element the event is bubbled up to all of its parent and it seems that the click is happened on each of its parent.
We can make some cool shit using the power of event bubbling, but that is out of the scope of this article.
If you want me to write more (and show more example) on event bubbling, please leave a comment below โฌ‡๏ธ.
Thanks a lot for reading this article. ๐Ÿ’“
Follow me twitter to show some love โฃ๏ธ

ย 
Share this