JavaScript interview questions | Event propagation in JavaScript

In this video, we continue with our javascript interview questions by getting into event propagation in javascript. We look into the basic concepts and understand how event bubbling and event capturing takes place in javascript.

Transcript:
Before getting into all the details about bubbling and capturing, let's first get to know what events are in the first place.
In the context of the dom, or the document object model, events serve as a medium for one part of it to communicate with another.

Let's say there is a button somewhere on a web page. Whenever a user interacts with it by clicking, hovering, dragging etc, events are generated. These events can then be listened to, and changes can be made to other part of the webpage based on what kind of event it was. Basically, any action can be performed upon triggering of the event.

Taking example of an onclick handler in particular.

In terms of code, it would generally look something like this.

Here, we are telling the web page that whenever someone clicks this button, and an event gets generated, run the do something function and pass that event as an argument to it.

Post that, whatever action that needs to be performed, can be performed inside of that function by making use of that event information that got passed to the handler.

The web pages that we work with nowadays are quite complex.

Let's say that there is a button placed somewhere in there. But then, it is quite probable that the button is wrapped inside of a div, which might be a logical grouping like a form group or anything else. Also, all this would definitely be enclosed inside of the document tag that wraps the whole page.

That means, when you are clicking on that button, you are also technically clicking inside of that div as well as any other outer layers that are enclosing the button like a form group etc all the way to the document. In other words, you are also clicking on the document whenever you click anything on the page.

That brings up so many questions. Questions like: If we put handlers on all those entities, would all of them fire? What order would they fire in? Why do we care anyways?

Let's find answers to all of them. Well, some of them,
Event propagation is the concept wherein an event propagates all the way from the top i.e document to the element that triggered that event then all the way back to the document.

What this means is, if we put handlers on the document, the div and the button in the last example. An on click event will be triggered on all three of them in a particular order, either from the topmost to the bottomost or the other way around.

How does JS decide which way the event propagates? Let's find out.
In event bubbling, when an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

So, in case of our example, they would get fired one after the other starting from the button to the top, that is document.

Almost all events bubble to the top by default except a few like hover. Which means almost all events start from the bottom and make their way up, so we can catch them at the most specific elements first and them move to the generic ones.

Also, we can call a method called Stop propagation on the event instance that we get passed. This stops the event from moving on to the the next element in the chain and hence stop its propagation. But this is not advised unless you know all the consequences.
This is a good time to talk about event dot target.

Let's say that we have an on click handler on the div in the example that we are considering. If, for instance, there were several buttons under that div, how would we know which of those buttons triggered the event?

The most deeply nested element that caused the event is called a target element, accessible as event.target which comes in handy when we have a navbar menu and define a common behavior for click on any of the navbar items by writing a click handler on the entire menu and doing different things based on event.target.

If you liked that one, do Check out my other popular videos:

1. Learn about public-key cryptography
https://www.youtube.com/watch?v=64DL9BNVwkU&

2. maximum substring in a string (Google interview question)
https://www.youtube.com/watch?v=IHsX70r-fIQ

3. How the javascript engine works?
https://www.youtube.com/watch?v=KM9coMpy5sQ

4. Real time median in a stream, another google interview question
https://www.youtube.com/watch?v=1CxyVdA_654

5. Understand the Javascript event loop
https://www.youtube.com/watch?v=XzXIMZMN9k4

6. Understand Promises in javascript
https://www.youtube.com/watch?v=gV7SaMIFyg8

7. Git basics you must know
https://www.youtube.com/watch?v=HDRXwokgWpo

#javascript #bubbling #capturing

Видео JavaScript interview questions | Event propagation in JavaScript канала ComScience Simplified