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.
Original source
31 responses to “Event Bubbling and Capturing in JavaScript”
I guess, for me, the obvious question is, why should click events be executed on buttons we never clicked on?
Nice…sir
This was a great review, thank you!
Amazing explanation. Thank you for taking your time to produce this great content. I did a little search and found this below!
Event capturing in jquery
https://stackoverflow.com/questions/17249125/event-capturing-jquery
thanks. Helped me!
Which IDE are you using?
Sir please explain prevent default and stop propogation with example
Very helpful. Thanks for your time.
Very informative, clearly explained
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?
I just tweeted this!
I Liked this n posted it on Facebook! U have an awesome channel!
really good explanation thank you i was so confused about event phases but now it's clear to me
What if 1 is true and 2 is false?
Clearly explained. Thank you!
I want to see the real project example of Event Bubbling and Event Capturing, to understand how it works in real scenario
Awesome tutorials. Good luck..!!!
Best teacher on YouTube hands down
Which Code Editor is being used in the video?
Great Explanation in simple words awesome 🙂
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
HI Sir .. You are really helping a lot in understanding the depth of the concepts of JavaScript…
Cool explaination, thanks
props to that explanation clearer than a transparent bravo
lots of children and parents executed
It's Just amazing.
It is incomplete you didnt say how to stop thebpropogation..
Why don't you use e.target property?
Very good tutorial, thank you
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?
thank you