Event bubbling in JavaScript

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

What is event bubbling
Let us understand this with an example. HTML elements can be nested inside each other. For example a button element can be nested inside a span element and the span element inturn can be nested inside a div element.

Notice that we have onclick attribute specified for all the 3 elements.

[html]
[head]
[style type="text/css"]
.styleClass
{
display: table-cell;
border: 1px solid black;
padding: 20px;
text-align: center;
}
[/style]
[/head]
[body]
[div class="styleClass" onclick="alert('Div click handler')"]DIV element
[span class="styleClass" onclick="alert('Span click handler')"]Span element
[input type="button" value="Click me" onclick="alert('Button click handler')" /]
[/span]
[/div]
[/body]
[/html]

A click on the button, causes a click event to be fired on the button. The button click event handler method handles the event. The click event then bubbles up to the button element parent (span element), which is handled by the span element event handler method. The click event then bubbles up to the span element parent (div element). This is called event bubbling.

Notice that if you click on the [span] element, it's event handler and it's parent([div]) element event handler are called. If you click on the [div] element, just the [div] element event handler method is called. So, the event bubbling process starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy.

The following example is similar to the one above, except we removed the onclick attribute from button and span elements. Because of event bubbling, when you click on the button or the span element, the event gets handled by the div element handler.

[html]
[head]
[style type="text/css"]
.styleClass
{
display: table-cell;
border: 1px solid black;
padding: 20px;
text-align: center;
}
[/style]
[/head]
[body]
[div class="styleClass" onclick="alert('Click event handled by DIV element')"]DIV element
[span class="styleClass"]Span element
[input type="button" value="Click me"/]
[/span]
[/div]
[/body]
[/html]

When the event gets bubbled, the keyword this references the current element to which the event is bubbled. In the example below, we are using "this" keyword to reference the current div element and change it's border color. When you click on the innermost [div] element, all the 3 [div] elements border get changed due to event bubbling.

[html]
[head]
[style type="text/css"]
.divStyle
{
display: table-cell;
border: 5px solid black;
padding: 20px;
text-align: center;
}
[/style]
[/head]
[body]
[div id="DIV1" class="divStyle"]
DIV 1
[div id="DIV2" class="divStyle"]
DIV 2
[div id="DIV3" class="divStyle"]
DIV 3
[/div]
[/div]
[/div]
[script type="text/javascript"]

divElements[i].onclick = function () {
}
}
[/script]
[/body]
[/html]

Stopping event bubbling : If you don't want the event to be bubbled up, you can stop it.

With Internet Explorer 8 and earlier versions

With Internet Explorer 9 (and later versions) & all the other browsers

[iqbaljournals]

There is no limitation to you r knowledge..superb explaination..thanks alot

[someshnukala]

Saraswathi putrlulu sir meeru. mimmalni yemani pogadanu. Hats off sir to you

[alishanali]

good long detailed explanation! Didn't need to watch another tutorial after yours. Thanks

[StockDC]

Extremely concise and extremely well put together. Thanks so much for the great video.

[nayanamtanuj]

kudvenkat  I am getting confused where to use "this" keyword. I mean since we are able to catch each element of div in divElements[i] why can't we use something like = 'red'. Also can you please clarify when to use double quotes and when to use single quotes. Like can we use instead of single quotes in 'div'. And one more question when you call any function in html tags you never use the small brackets "()". You simply call the function by the name In C++ and all we use the small bracket also. Can you please tell me why we are not using small brackets after the fucntion name when calling in HTML tags like onclick = samplefunction

[kevinmarmet]

Thank you for the easy to understand demonstration! Well done.

[mdev]

Your explanations have been consistently easily understood, which is why I subscribe!

Is there a way to selectively bubble events such that, for example, DIV2 does not execute the function, but DIV3 and DIV1 trigger the execution of the function when clicking on DIV3?

[mrA]

Thanks for the great tutorial. The way you explain, is superb.

[shikhaverma]

Thanks for making this simple video to understand event bubbling!!!!

[rivudas]

Beautifully explained. Thank you so much.

[stevensavoie]

Hello. I didn't see any explanation in the video about the fact that you didn't need a consecutive chain of event listeners (for example, remove the event listener of the span and it continues to bubble from the button to the div anyway). You made the code available so I could check it out really fast without having to write my own code just to do it.. but an explanation would have been nice. either way, thanks for the video. :)

[aj]

The border color did not change onclicking in chrome(80.0.3987.116). It only changed after clicking on third div. But worked perfectly fine on firefox.

[narinepangratiani]

Awesome tutorials. Thanks for them(All of them :)). And where can I find this slides?

[naveench]

Your javascript Materials is good. Sir give me simple and understanding defination for javascript event bubbling.Defination is confusing .

[komalpatil]

Sir plz explain why we use event || window.event in the video

[josephregallis]

The 3 div's work OK with Internet Explorer turning red after clicking the middle div and clicking OK on the alert dialogs, but Chrome only turns the borders to red after clicking OK for the DIV1 div dialog. The updated Chrome version I have is: Version 64.0.3282.167 (Official Build) (64-bit)

[maxycool]

hello,
i was just checking the event bubbling with different html styles and i came across the color change in div element as i use the code as

this.style.color = 'yellow';

in the for loop the color in all three div elements changes to yellow irrespective of the div element clicked, can you explain this why is it happening?

[rickg]

this is not working for me what could be a possible reasons?Please tell i am confused

[darkFo]

In IE 8 "this" doesn't reference the current element that triggered the event. And you can't solve the problem by using event.srcElement because, if you click on div3 and the event gets bubbled up, event.srcElement will always be div3. I solved the problem by passing the element to the handler function.

[tiyasbiswas]

Give an example where event bubbling is used in realtime.