Here, in this section, we will learn and discuss the two aspects, which are event bubbling and event capturing. We will try to practically learn these concepts one by one.
Example of Event Bubbling
Let's look at the below example to understand the working concept of Event Bubbling:
Explanation of Code:
The sequence has taken place due to the concept of event bubbling. Thus, in this way event bubbling takes place.
We can also understand the flow of event with the help of the below flow chart:
It means when the user click on the button, the click event flows in this order from bottom to top.
In the above code, when we click on the button, it will not work because event.stopPropagation () method is being invoked here due to which th parent function will not be invoked.
Note: The event.stopPropagation () method stops the move upwards bubbling (on one event only), but all the other handlers still run on the current element.
In order to stop the bubbling and also prevent the handlers from running on the current element, we can use event.stopImmediatePropagation () method. It is another method that stops the bubbling and execution of all the other handlers. It means if an element has more than one event handler on a single event, all the event handlers bubbling will get stopped using this event.stopImmedaitePropagation () method.
Do not use event bubbling unnecessarily.
Although event bubbling is a convenient approach, it is recommended that it should not be necessarily used. It is because of the event.stopPropagation () method creates pitfalls that are hidden, and these pitfalls can cause some problems at a later stage.
Let's understand it via an example:
Although the concept of event bubbling is incomplete without knowing about event capturing, so let's begin with event capturing and try to combine both concepts and completely understand the concept and the working.
Netscape Browser was the first to introduce the concept of Event Capturing. Event Capturing is opposite to event bubbling, where in event capturing, an event moves from the outermost element to the target. Otherwise, in case of event bubbling, the event movement begins from the target to the outermost element in the file. Event Capturing is performed before event bubbling but capturing is used very rarely because event bubbling is sufficient to handle the event flow.
Example of Event Capturing
Let's see an example code to understand the working of Event Capturing:
Explanation of Code:
So, when we click on the button, the click event is performed in the following sequence, as you can see in the below flowchart:
Complete Concept of Event Flow
The below diagram shows the execution of the event flow:
Thus, event handling and event capturing are both foundations of event delegation. These are the extreme power of event flow.