Handling Event Propagation In jQuery

So, what will be the output? You may be thinking that it is simple; when the user clicks on the child div then only the child div bound event will be triggered. But it gives you two alerts "childDiv" and "MainDiv". Why so? We will understand that using the following picture that demonstrates the region of DIVs.

Just imagine the area of these DIVs. The main DIV is the entire area and inside it there are child DIVs.

Consider the first image. We have bound the "click" event onto the main DIV, so wherever in the entire area of this DIV is clicked, the "click" event will be fired, right?

Now, look at the second image, still we have the Main DIV and its associated "click" event. Just think about the area of Child DIV1. Isn't it also the area of our Main DIV? Of course it is. So, when you click in the area of Child DIV1, it can be considered that you have also clicked on the area of the Main DIV. Hmm! And that's why we are getting two alerts in our example.

When we bind an event on a control or element, actually a listener is assigned for that event. This listener is not aware of other listeners and works individually. It is their duty to watch for an assigned event on the element and trigger to function call against that event.

It means we need to look into it and handle the firing of the parent DIV's click event if the Child Div element area is clicked.

Look into these lines:

Another method of handling event propagation is using stopPropagation():

Now, we are checking if the child DIV is really not clicked and if this click event is meant for the Main Div. This will handle our issue and we will get only one alert message in our example. Actually, we are avoiding event propagation by checking event target property and using stopPropagation().

Thus, we can write event binding with avoiding event propagation as in the following:

Or

@AnilAwadh