An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Interviewer's Favorite: Event Bubbling
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
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
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
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
Original Link: https://dev.to/sidmirza4/interviewers-favorite-event-bubbling-787
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To