Event Bubbling and Capturing in JavaScript
- January 12, 2024
- Posted by: MainInstructor
- Category: Go JavaScript
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1705056231_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Event Bubbling and Capturing in JavaScript
Welcome to Texas tutorials today we are going to learn about event bubbling and capturing in JavaScript meaning of bubbling in real life is when a bubble goes from the bottom of the glass to the top of the glass when you pour soda into a glass the whole happens and it goes
From the bottom top that’s the meaning of bubbling in real life beyond a webpage bubbling means when you have an event on an element the execution of the event goes from the the lowest element to the top – all the way to the body when an event happens on a particular element
Let’s say if you click on a button well which is a click event you’re not only clicking on that button you’re actually clicking on the parent and it’s parent and all the way to the body so if you click on a button that means you also
Clicked on the body now let’s look at this example you have a body and inside that you have a main container and within that container you know a parent element and this parent element has two elements child and other basically two – child but one I named Charles one I
Named other I don’t know why so I can differentiate now let’s say child has a click event parent also has a click event that does something and all the way body also has a click event that does something now when you click on the child let the child is a button and if
You click on the button the event bubbling means it will execute the lowest order so it will execute the child event colliculus and then it would go to the next step to parent and see if it has a click event and it would execute that and then since mate doesn’t
Have any event it would go check the top one which is body and it would execute its click event so this is what’s called event bubbling now let’s do some coding we’ll also look at the event capturing later on I’m going to start with the main element so
I can say div main and within that I will have the parent element and within that I will have the child element and the child element would have child able to say child and I will have that other element which and it would just say
Other so I have nice structure now I can look at how it looks like so it looks like this I can add some style quickly so that I can differentiate between these two buttons and then I can look at also parent if you look at the output I can differentiate between these two
Buttons and the outer boundary is nothing about the power but before we dive the JavaScript but I’m just going to add jQuery library so it will make my life a little bit easier so since I added jQuery I can use the jQuery selectors and I’m going to have a click
Event here and I can write what I click inside and similarly I will have an event on child as well so click event I have an out actually given any what happens when I click so I’ll do the next function and all it does is when you
Click on it it will just print cost a lot it would say parent click that’s it since we want to know which one executes first I’m just going to have this and then inside the child event it will be similar function and it would just say console.log child click
Now if I click on the child it would say child click remember in the event bubbling the child gets child click event execute bridge so that’s why it says counseling and parent click now if I clear this and if I just click on the parent only parents colliculus gets
Executed because I did not click on the child now I clear this and if I click on the other since other does not have any click event the parent gets executed so parents click event gets execute so we looked at the event bubbling now let’s look at the event capturing now all the
Modern browsers there’s two phases actually when you click on an element it actually captures that element from top to bottom and the second phase is actually bubbling which is bottom to top so why only bubble happened for us while in capture happens well you can pick you
Can pick either you want to do on the bubbling phase or or capturing phase but in all the modern browsers the capturing happens first now in the example that we looked at we only see bubbling because jQuery I believe doesn’t have options to do even capturing it doesn’t provide but
You can write raw JavaScript to enable that and you can actually do both so stop by 11 you can use the capturing some actually bubbling but remember capturing always happens first another important thing is in all days when the first Netscape Browser came around it only had cats
And then my Microsoft release it’s ie it decided that the capturing not not the right way to go and so they they were using bubbles and in the older modern browser there’s capturing phase and then there is a bubbling face and you can choose which one you want to use so
Let’s do some coding right so in the previous example we looked at the jQuery example and I took that out and now we’re going to do some vanilla JavaScript I’m selecting the parent element using a creative document cry selector and then I’m adding an event listener which is listening for
Colliculus and now a callback function when that event is clicked when that element is clicked it would just say and click and similarly I’m doing it for the child element so by default it would use event bubbling so if I click on the child the child gets clicked first and
The parent get click a second now I can change that all I have to do is I have to pass a variable here so after they really call back I can pass a variable called use capture means if you use capture is true use the capture face
So all I have to say is true here and I can do the same thing here for this event as well which means it’s going to use a capturing face and do the click event accordingly so now if I click on the child the parent gets click first
And then the child gets second so what really happened in the capturing face event capturing face which happens first it will go from top to bottom and at the time the parent a click event would come first and it would see if it has a use capture it look true so it
Would execute that click event and then the child event also has use capture equal to true so it would exhibit that event so the parents get executed first and then child get executed now if they were both were false then it would be other way around because it would happen
In this it would ignore all the the capturing and it would happen in the public face so that’s all folks I will be providing a link to the examples that we looked at in this tutorial and if you learn something from this video please like the tutorial a provide a
Constructive comment and subscribe thank you you
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
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.
Greate Tutorial, Thanks
Thanks for the video, nicely explained.
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?
Thnx alot it was really helpful
where is spec for all this hidden things?
Very helpful and clear. Thanks a lot.
Oldest javascript teacher
I like the smiley faces! Also, very solid explanation of bubbling and capturing.
Clear and clean explanation with no unnecessary stuff
Thanks a ton!
Perfectly described
Awesome dude. Thanks for the explanation.
Fantastic video😍👍
thank you … very helpful ;
Can I get example of bubbling &capturing without using jQuery??
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 ?
After almost one week trying to close this subject in my mind, I just finally get it with this video. Thanks dude.
really helpful thanks..
Really helpful!
Which work environment are you using?
very well explained Event Bubbling and Event Capturing
Thank you for the explanation.
Man this intro pic 😂
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'.
Found out this channel lately. All explanations are clear, precise and easy to understand
Thanks a lot….❤
Thank you sooooooooo muchhhh…..u hv jst cleared the concept that was I'm looking for so many days 👍
Good clear explanation!
thank you very much!
for those looking for a stopPropagation() explanation, you can watch https://www.youtube.com/watch?v=UWCvbwo9IRk, I found it useful
Cool, clear explanation 🙂
Thank you
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?
what is code editor used in this video ?
Thank you so much! This video finally helped me understand event bubbling, especially on your example at 4:34.
why would use jquery for this tutorial? jquery is a library its not even programming…
Thank you for this tutorial on Bubbling and Capturing. Very helpful!!
very clear, thank you!
I want write calculators.html using JavaScript. How to identifying clicked elements and set text value.
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
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.
Happy Makar Sankaranti
Happy Makar Sankaranti
Nice, but needs a example too me thinks.
thanks it helped me
Techsith definitely my favorite channel, your explanations make everything so clear, thank you!!
Great video, thanks…!
Nice.
Thanks a lots this is awesome