The third parameter - Event bubbling and Event capturing

I have been learning about events in JavaScript lately. I stumbled upon a very popular topic and learned something new that I wanted to share.

It's about event bubbling and event capturing.


As you can see, I have created a ul element with 5 images listed under it, each inside li elements. I've also added corresponding IDs to target each image and the ul element.

__________________________________________


In the above code, one event listener targets the ul element as a whole. Whenever an image inside the ul element is clicked, the event fires, and it is logged in the console. Notice that the third parameter is set to false.

Secondly, there's another event listener that gets triggered when the specific target sheep image inside the ul element is clicked, logging the corresponding message.

Now, note that the third parameter in both events is false, leading to two consequences:

Case 1: Event Bubbling (3rd parameter: false)

When an image inside the ul element is clicked (other than the sheep image), the log message corresponding to the first event is displayed. However, when the specific sheep image is clicked, the second event fires first, logging its message instead of the first message. This demonstrates that the inner event is bubbling up to the top, which is known as event bubbling.

Case 2: Event Capturing (3rd parameter: true)

Now, if the third parameter in both events is set to true, the results are reversed. When the sheep image is clicked, the first message is logged first, followed by the second message. This prioritizes the initial event, then moves to the subsequent events. This approach is top-to-bottom, whereas event bubbling is bottom-to-top.


But .. as the default parameter is false, when we need to prevent the event bubbling, the following method can be used: 

e.stopPropagation()

e is the event object

Popular posts from this blog

Binary Sreach Algorithm : Optimized way to get the index of the mid element

The classical way to find the mid element in an array would be (start+end)/2.  But integershave a limited range and what if the size of the array is too large and (start+end) exceeds the range of integers in java?? Hence, inorder to make optimize it I learnt a new way to find the mid element which is  start + (end-start)/2 in this way, even if the size of the array exceeds the integer range, the end-start would make it smaller. 
Read more

Abstract classes

I have been learning the most important concepts of java which is the object oriented programming and today I learnt about the abstract classes and method and wanted to share my thoughts on them.  Abstract method : Method which doesn't have a body is said to be an abstract method and also it is declared using an abstract keyword.  Abstract class : If a class contains an abstract method, then it is termed as an abstract class and it should also be declared with the abstract keyword.  The fun part :  Abstract classes are like a template or a thought. It has abstract methods but no definition. When a child class extends (inherits) this abstract class, the abstract class allows the child class to over ride it in its own way.  For example, if an abstract class has an abstract method known as greet(), then the child class can override it in its own way like greet() can now say good mrng or good afternoon.  Note :  1. Objects of abstract class cannot be insta...
Read more