Event Bubbling and Capturing in JavaScript

Understanding Event Bubbling and Event Capturing phase in DOM and how to use it.
Event Bubbling
------------------------
Event bubbling directs an event to its intended target, it works like this: A button is clicked and the event is directed to the button. If an event handler is set for that object, the event is triggered. If no event handler is set for that object, the event bubbles up (like a bubble in water) to the objects parent.
*My Udemy Courses
www.udemy.com/...
www.udemy.com/...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* www.youtube.co...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.

[@mohsinrahman8107]

stopPropagation() method is used to stop event bubbling and event capturing..

[@Techsithtube]

yes that is correct. however you have to use it in one of the events.

[@drapala97]

You are correct, however, the stopPropagation() method is not recommended. It may screw with UX people and has may induce collateral damage.

[@hemendrasahu7943]

Thank you for this tutorial on Bubbling and Capturing. Very helpful!!

[@ahmedrabie9444]

really good explanation thank you i was so confused about event phases but now it's clear to me

[@Aakrarvaxa]

Cool, clear explanation :)

[@Techsithtube]

Glad it was helpful!

[@ronithable]

Very informative, clearly explained

[@pradeepkumar-qh5pi]

really helpful thanks..

[@Techsithtube]

Glad to hear that! Thanks for watching!

[@V06ps]

awesome now I understood capturing and bubbling both thanks a alot :)

[@Techsithtube]

:) thanks for watching!

[@miguelperezpal]

thank you for sharing, i didnt know event capturing parameter existed

[@Techsithtube]

Somehow jquery didnt have that option, and since most of us dont use vanilla javaScript we dont know certain options available. but i think its a useful trick to know. Thanks for watching! :)

[@Gryphor1]

Awesome explanation! thanks

[@elisabeth375]

I like your videos! They are very helpful!

[@Techsithtube]

Thanks for watching :)

[@boyacosweep]

You should first "show" bubbling and capturing (maybe with elements that are highlighted instead of or in addition to console logging.). You should also give real world examples like showing how it works with a nav bar and some links. You should also show how it works with stoppropagation.

[@derekdj6790]

Great explanation, thank you.

[@mariopuc5603]

thanks it helped me

[@PradeepKumar-fv8sj]

It's Just amazing.

[@Techsithtube]

Thanks for watching Pradeep!

[@imtiyazahmad5538]

Cool explaination, thanks

[@EpicphoneGamer]

Thanks for the video! How does this combine with stopPropagation() and preventDefault()? Can I stop bubbling and event capturing with both? Or just with stop propagation?

[@eduardmart1237]

What programs do you use to make these videos? (I mean that you can add jquerry by only one click, and you have such an interesting list of modules.)
Really interested.
Do you use jsfiddle?

[@Techsithtube]

yes, I use JsFiddle you can add most of the library and even babel with a click.

[@QuintJer]

Explained very well! Thank you

[@Techsithtube]

Thanks for watching! :)

[@ReneBroekhoven]

nice, thanks.

[@Techsithtube]

Thanks for watching ! :)

[@shikharsaxena4432]

Which Code Editor is being used in the video?

[@AZAMKHAN-vl4lq]

Can you explain it in real world project example because I am pretty new student ,so these concepts I completely got it but can’t relate in real world project

[@Techsithtube]

Azam, any UI intensive app, you will be using it a lot. for an example, lets say you want to show a menu on right click in your app. except one place inside a text box where right click would allow you to format the text. so the first right click is at body level and the last right click is at the lowest level in that text box. But when you right click on the text box you want that to execute first and you want to ignore the body right click. This is a classic example of how event bubbling works.

[@DominicVictoria]

What if I define both Capture and Bubble event

[@hybridrekcah1431]

Happy Makar Sankaranti

[@mack1450]

boss can you give github link inside your description box, that could be nice

[@sumer9999]

Great explaination, better if you would have covered stop propogation

[@Techsithtube]

Thanks for watching Sumer!

[@allandacasin9041]

Just add stopPropagation() on below code and pass an event e on the function.
c.addEventListener(
'click',
function(e) {
// e instance of an event which is the current event
e.stopPropagation();
console.log('clild clicked');
},
fromCapture
);

[@hybridrekcah1431]

Happy Makar Sankaranti

[@Techsithtube]

Happy Makar Sankranti!

[@shauryasrivastava3727]

var length = 10;
function fn() {
console.log(this.length);
}
var obj = {
length: 5,
method: function(fn) {
fn();
arguments[0]();
}
};
obj.method(fn, 1);
Output will be => 10,2
()=> i want to ask why i am getting 2 for this?

[@Diamonddeath]

Really helpful! Thanks!

[@achyutrastogi8080]

Nice, but needs a example too me thinks.

[@PlayBetterJazz]

Best teacher on UA-cam hands down

[@jstar3943]

May The Fourth be with you. Thanks for the video!

[@kamatz4156]

thank you very much!

[@yausamuel1858]

There are too many videos repeating the same thing about bubbling and capturing, they are almost the same videos. I'd suggest you make a video to highlight the impact of 'bubbling' and 'capturing' in a real-world practical scenario with 2 examples to highlight the contrast, the problem that you are facing, and how to resolve it with either 'capturing' or 'bubbling'.

[@avimehenwal]

So now I am imagining, what could be use case when we actually want to use the event bubbling? To my simple novice js dev mind, event bubbling sounds like a side effect and should always be prevented! ?? Any more insights ?

[@shashithosar4778]

I want write calculators.html using JavaScript. How to identifying clicked elements and set text value.

[@Sathyaish]

Nice.

[@lycan2494]

ah shit here we go again

[@miguelvenegas4172]

I like the smiley faces! Also, very solid explanation of bubbling and capturing.

[@unnamed49]

why would use jquery for this tutorial? jquery is a library its not even programming...

[@nidhikourav7255]

Can I get example of bubbling &capturing without using jQuery??

[@VenkateshMogili]

Fantastic video😍👍

[@varunverma5997]

World's best teacher :)

[@thecyrusj13]

Awesome dude. Thanks for the explanation.

[@user-zb5jp4ti1d]

thanks for the video. really cool. i understand the semantics, but what is the rationale for event bubbling in JS... i mean why do we have it

[@Techsithtube]

lets say you have a webpage where if you right click you want to show some menu. except part of the small area where you want to have a different menu or no menu. Basically your body element has a right click event that would execute when you click anywere on the body. and the small area , which is an element under the body , also has a right click event . so when you click on that small area it would check if that has right click event before going to higher level of elements so you can prioritize which one will execute first.

[@ak6513]

thanks for explaining on the use of event bubbling and capturing. please mention the usage of it in the videos that you record. it will help us better understand the concepts

[@varunjain3756]

very well explained Event Bubbling and Event Capturing

[@143balug]

Explaination is very well! Thank you

[@simongomes5671]

Thanks for the video, nicely explained.

[@kevinbridges8577]

props to that explanation clearer than a transparent bravo

[@hello_sharma_ji]

Nice video i learn 2 new things in JavaScript it's really helpful

[@Techsithtube]

I am glad you learnt . Keep it up Rahul

[@josephkelly9564]

Which work environment are you using?

[@Xxxsorrow]

Thank you so much! This video finally helped me understand event bubbling, especially on your example at 4:34.

[@Techsithtube]

Glad it helped!

[@namronmanelok4119]

I'm 70 years old and retired. So I figured that I send emails to friends ,why not learn something about how the computer works. A young man said lean about Html ,CSS and Javascript. WOW!! somebody needs to smack me.
I figured it was not easy ,but never expected it to be rocket science. hahahaha this video did explain an interesting point. Hope to some day understand most of it.

[@Techsithtube]

Namron, I admire your desire to learn something new at 70. HTML , CSS and JavaScript can be confusing . Feel free to ask questions if you have any.

[@KashishBhatia90]

Very helpful and clear. Thanks a lot.

[@aruchgupta]

I'm confused. If capturing is the default behaviour in modern browsers then how come, when you wrote the JS code, bubble is being performed?

[@Techsithtube]

Bubble is the default behavior of the modern browser. Sorry if I said capture, I might have made a mistake. thanks for reminding.

[@BasantKumar-sy7fj]

really awesome tutorial ever.. I watched....

[@Techsithtube]

Thanks for watching ! :)

[@akshaysharma30498]

youuu... my friend!!! are way too underrated!

[@maciej12345678]

where is spec for all this hidden things?

[@shivarammuthukumaraswamy7164]

Thank you for the explanation.

[@jonatan9142]

lots of children and parents executed

[@gurhitsingh6271]

Thank you sooooooooo muchhhh.....u hv jst cleared the concept that was I'm looking for so many days 👍

[@Techsithtube]

Most welcome 😊

[@rosehope5376]

Thnx alot it was really helpful

[@HarshaVardhan-jf9sd]

u cud have added stop propogation also

[@kareemabdallah1502]

thank you ... very helpful ;

[@tyroneslothdrop9155]

I guess, for me, the obvious question is, why should click events be executed on buttons we never clicked on?

[@Techsithtube]

Actually you did click on . for example if you are inside the bathroom you are also inside the house. so you clicked on the button which means you also clicked on the page.

[@mdbiplophossain1180]

Greate Tutorial, Thanks

[@eeswarevibes9857]

HI Sir .. You are really helping a lot in understanding the depth of the concepts of JavaScript...

[@AliRamazon]

Coool. This video made everything clear.Thanks ..

[@Techsithtube]

Thank you for watching!

[@AhmedVlogs1]

is capturing similar to delegation ? and by default Bubbling happens or delegation?

[@saranshdhyani3164]

Oldest javascript teacher

[@topshot2219]

Don't think I've seen a video on event bubbling until now. Every time it's explained to me I forget the explanation, now I just press 'repeat'!

[@topshot2219]

Actually I referring to the call stack, (similar concept?).

[@Techsithtube]

call stack is diffrent. its how you execute each statement in javascript last statement gets executed first . However in the event bubbling there events gets executed from lower level elements to top level elements inside the dom.

[@raymondbyczko]

Good clear explanation!

[@Jay-eg7yt]

I love your channel. Quick question a bit off topic. Which video editor do you use to capture the video of you in the bottom corner, and to record your text editor?

[@DominicVictoria]

A Constructive Comment

[@mdrehan4all]

Perfectly described

[@mohan9285]

I want to see the real project example of Event Bubbling and Event Capturing, to understand how it works in real scenario

[@davidfromnorth7836]

Man this intro pic 😂

[@hayslett2006]

Thank you very much, I feel like I am walking away with a much better understanding of event flows.

[@nowfelkhan4149]

Thanks a lot....❤

[@AshishKumar-hg2cl]

Amazing videos very useful and knowledge gaining..

[@Techsithtube]

Thanks for watching!

[@lalruatsangabawitlung3728]

Found out this channel lately. All explanations are clear, precise and easy to understand

[@hemantrathore356]

Should we do something to stop event bubbling? What could be the consequences if we don't stop it? If we have to stop it then how?

[@Techsithtube]

you can use event.stopPropagation();

[@robertkylethomas173]

what about window.event.cancelBubble is that the same thing?

[@Techsithtube]

Its a same thing, cancelBubble is an old method used only by older version of IE, I believe earlier than IE9 .

[@robertkylethomas173]

techsith ok cool as i suspected because its in the microsoft exam awesome channel

[@Techsithtube]

ok. avoid using it. :)

[@dobariyadhaval2036]

Great Explanation in simple words awesome :)

[@Techsithtube]

THanks for watching!

[@miw879]

Thanks a ton!

[@gargameo4560]

Very well explained, thank you :)

[@adilismail3593]

It is incomplete you didnt say how to stop thebpropogation..

[@pagadalaharitha5786]

Sir please explain prevent default and stop propogation with example

[@ibknl1986]

Thank you

[@pratibhakshirsagar7476]

Nice...sir

[@anugnagunturu2478]

Clear and clean explanation with no unnecessary stuff

[@seenuvasanv]

Thanks

[@ds3599]

Hi, I’m new to js and thanks for explaining it very well. Can you also tell me which text editor you are using?

[@jonathanmakover3380]

Hey, how's it going? I have a problem here. "Event Bubbling.js:25 Uncaught TypeError: Cannot read property 'addEventListener' of null" why doesn't it recognize this? can you help me please?

[@Techsithtube]

may be the element doesn't exist . Can you send me the code.?

[@jonathanmakover3380]

@@Techsithtube Yes, thank you. That's for the HTML:




child


other


That's for Javascript:
$('#parent').click(function(){
console.log('parent clicked');
});
$('#child').click(function(){
console.log('child clicked');
});

var p = document.querySelector('#parent');
p.addEventListener('click', function(){
console.log('parent clicked');
});
var c = document.querySelector('#child');
c.addEventListener('click', function(){
console.log('child clicked');
});

[@Techsithtube]

for the javaScript part wrap the whole content in an iife like this. If you dont know what iife is i have a tutorial on it.
$(function() {
$('#parent').click(function() {
console.log('parent clicked');
});
$('#child').click(function() {
console.log('child clicked');
});
var p = document.querySelector('#parent');
p.addEventListener('click', function() {
console.log('parent clicked');
});
var c = document.querySelector('#child');
c.addEventListener('click', function() {
console.log('child clicked');
});
})

[@JonathanMakover]

@@Techsithtube Great Thank you !

[@MylesGmail]

I Liked this n posted it on Facebook! U have an awesome channel!

[@monditthumniramon8895]

awesome tutorial ! great big thanks

[@Techsithtube]

Thanks for watching!

[@nigelmtb]

Very helpful. Thanks for your time.

[@siddhesh9901]

That was good explanation.
Could you please answer below questions?
How to stop bubbling?
What is difference between stopPeopagation and preventDefault?
What is use of cancelBubble?
Also we are waiting for your new videos on interview questions to experienced developer.
Thank you

[@Techsithtube]

you can stop bubbling using stopPropagation and cancelBubble. they are almost the same. preventDefault stop . PreventDefault stops the browsers default action. I will create a interview Questions for Experienced Developer soon.

[@ShubhranshuPandaa]

Could you please tell me how you do that? by writing "div#main" it will automatically print please tell me. By the way i like all your expalnation....Its really too good. Thank you for providing such a great explanation.

[@Techsithtube]

you type div#main and hit tab. most of the editors support that.

[@quintrahaman]

Thanks for the video. What would be great is if you created a series of videos that incorporated all of what your advanced js tutorials covered but targeted to a specific outcome/product. For example, when creating a single page app (not using any SPA frameworks) that is targeted for mobile, how one structures the HTML, writes the JavaScript, etc matters a great deal to ensure the app performs as well as a native app and does not crash. Memory management is a very important consideration and it would be very helpful if you were to show the impacts of code on memory allocation/use, what the garbage collector is supposed to do and whether or not it can do its job based on how the code is written, and how to use the Chrome Dev Tools to identify memory use, memory leaks and how to troubleshoot accordingly.

[@Techsithtube]

That is a great idea . I will defiantly spend sometime creating a practical project series that will give overall picture. Perhaps a small library. I will try to think of something but if you have any project ideas, let me know. Thanks

[@modekano2148]

Good Tutorial Keep up

[@sparkling_star8123]

Which IDE are you using?

[@Techsithtube]

JS fiddle