JavaScript Event Capture, Propagation and Bubbling -

All about those confusing event things in JavaScript. Grab all the exercises and starter files over at JavaScript30.com

[@tigana]

If you’re here from The Odin Project, keep up the good work:) I’m rooting for you

[@ibenachoelvis4919]

Yeah @ Tigana

[@junhaoong941]

thanks hahahah

[@stevenson1142]

lets go brandon

[@ngndnd]

im so confused... even with the previous assignments. He goes too fast and doesnt explain why hes doing what he does

[@syedfaheem1185]

@@ngndnd don't go too fast and slow down the pace at which you are learning stuff. Just get acquainted with the stuff before moving on to the next course.

[@PatrikRasch]

Great job on this series, very helpful. The Odin Project brought me here!:) - Foundations: DOM Manipulation and Events

[@RustysAdventures]

Here for the same reason. Let's gooo!

[@ganyrehs]

I started Odin Project mid Feb 2022 and got to working with DOM manipulation this week of March 12, 2022. It's been a good experience so far compared to classes that I've taken in college. lol

[@achukwuLeke]

Odinites!

[@tigana]

Odin fam!!

[@nou9225]

Hello fellow TOP students 👋

[@ebrelus7687]

OP heroes. Forward! The additional resources are lethal. But repeats are what stick it up for long & targets holes. Thanks you bless you.

[@CoryTheSimmons]

Thanks again Wes! Learning a lot from this series. Humble beg: Please cover `this` and context in all its horrible glory. I'm pretty sure a lot of devs have a huge problem thoroughly grokking the concept because there are few resources with real world examples. It's especially important to thoroughly understand with React and Vue.

[@vspoke9150]

This is 5 years old and it help me so much today!! thank you!

[@greenparksquad6336]

This video has something that other videos and guides about bubbling lack - simplicity. it actually looks like an easy concept if creator uses simple examples rather than complex functions in his explanation. Great work, thank you!

[@jayceyourdreams2062]

good luck with the odin project guys!! we will all become aspiring developers one day

[@abdullahiomar6561]

good luck same reason

[@salaheddinemadih5617]

6 years ago and the video is still amazing

[@lann1sterroy]

Very clear explanation. These concepts were confusing me but this video really helped me to understand each of them. Thank you Wes!

[@MuhammadN0]

Unlike most of the people here, I'm not from the odin project but this video is one if the best explanations of js I've seen on youtube. Keep the good work

[@FreedomforAfricans]

Everyone’s here from Odin, I’m here from Lightning Web Components, and you’ve really saved me from all my confusion on events. Gracias!

[@emilymarin2521]

Very clear tutorial. I've worked with JS for about a year, but never had to use capture, propagation, or bubbling. This is a succinct and easy to understand lesson. Thanks!

[@justindonner2603]

What a fantastic teacher! I love how Wes is able to break down this material in a succinct and easy to digest manner.

[@copsarebastards]

odin project sent me here but this has gone way over my head. I guess I'll be coming back to this one later.

[@iced2916]

same, I think I'll take me some time to absorb all this new knowledge

[@GrantH2606]

Yeah this entire section has been very difficult for me to understand

[@TheArrogantMonk]

Crystal clear explanation! Love the pacing. Thank you!

[@bendustin7609]

The quality of this video is amazing.

[@oliveryt7168]

Came here from TOP. Really helpful.

[@hellonihaocomoestas]

CITIZENS OF ODIN. How long has it taken you to get from the very first lesson in the course to this one?

[@ryanpetnga1353]

9 days, studying an average of +8h a day everyday

[@seradfb345]

3 or 4 weeks on top of university work. I'd done some of a web development course before and have gotten my feet wet in a few other languages, so it went a bit faster than it would have otherwise. I think the most important stat over anything is consistency - that you keep going and enjoy what you learn and keep getting more exposure to concepts. It's easy to speed run and then burn out or just never get going. Consistency is what gets you there though!

[@jonathanplanet]

3-4 months, but I'm workingfull time and study about an hour a day after work and 3-5 hours weekend days

[@castrobertosue]

2-3 Months for Me, im working fulltime as well but I hammer about 15 hours a week.

[@gorilla-san]

"But we also clicked on the world" that bubblated quickly

[@AriKhuu]

Thank you! This was an effective, no-nonsense explanation video

[@ashleymeyer1366]

"...and you're also clicking on the world" 😂

[@icavir]

Thank you for the video. Excellent explanation, simple example with explanation of core functionality. Great to understand how events work in JavaScript.

[@samueljefferies2023]

Good, but blisteringly fast! Hopefully I can learn more so I can keep up with the pace.

[@imuentinyannosarumen9789]

And I was playing at a speed of 2x 😅

[@bhuwanpandey4342]

This is excellent explanation Wes Bos, but with capture true, isn't e.stopPropagation() means stop capturing and not stop bubbling

[@polinachetnikova7448]

Wes Bos and TOP are the two best resources out there for learning web development

[@bomharuprimavera]

4:57 if you would like to know the general area where it goes over what "capture" is. I know the KZbin player already references it as the "most replayed" area, but just in case people need it.. GL fellow TOP students!

[@hackeymabel8296]

well explained from the first 3 mintutes. Very straight to the pain. Thanks

[@djlee0721]

Wow.. finally understood everything. Thank you so much!

[@Tbone11756]

This is a goldmine of information, thanks so much for this!

[@zmonk901]

Great job Wes. Thank you for sharing.

[@MVIVN]

I'm really struggling. I think I need to go right back to square one and try again. Can't follow what's going on.

[@pjplaysdoom]

I'm here from The Odin Project. At 7:04 when I have capture: true and e.stopPropagation(); and click on the outer div of class .one I get 'bod' in the console, not 'one' Why would this happen? Please help.

[@pjplaysdoom]

That's OK, it's a syntax snafu on my part. 🙂

[@harunguven8581]

Thank Wes, "I clicked on the world 🌎🌍 😃", this made my day😄.

[@djfoo000]

for the following setting: propagation: true (for simplicity) capture: false once: true I'm still getting the parents logged as being clicked in subsequent clicks. The console logs the following with the above: three (after first click) two (after 2nd click) one (after 3rd click) (no more logs after 4th click) Is there a way to only log the element being clicked? In other words, ignore the parent, and any childs.

[@AJHF1991]

Thanks for the explanation!

[@louisdyrhauge2897]

Hello! Great video and series. I'm curious - how do you disable a whole line of code with one action as I've seen you do with a shortcut many times? I haven't been able to find out how anywhere!

[@cKEntertainment]

Shift Command Right Arrow (To select whole line) the press Command Forward Slash

[@syedfaheem1185]

God bless the contributors of the odin project.

[@Walocial]

Awesome example. Thanks!

[@bjorn5328]

I don't know why but when am using an arrow function to console.log(this) on 1:10 am getting a windows object ?can someone pls help me understand why am getting that output.Thanks!

[@fanwilliam7725]

I tried to click on the area where only is sitting on, I was expecting the console to return three, two and one. But the console only return "one". Which is confusing because I thought Java Script is going to capture "downward" to record all children element of .

[@ucf.christopher]

When you click on ".three", it is sitting inside of ".two", which is sitting inside of ".one". So by clicking the third div, you are also selecting the other divs automatically. If you click on div one, you are only selecting div one.

[@rtemmiroshnichenko6733]

Damn, this one is very useful! Thank you for videos. Great job !

[@ParkBosuk]

Thank you. Your lessons were very helpful.

[@vamsikumarreddypalugula7460]

Hey hi, In the case of stopPropagation and capture:true when we click on any of the div's the event should terminate as soon as it is triggered (on the window itself) but its getting terminated at first div (class="one") always. It makes sense as it(one) is the parent of all but behind the scenes everything comes from DOM right so it has to terminate at window and show us nothing when we click as we did not assign any class to it .

[@loia5tqd001]

and don't have any event handler with e.stopPropagation(), so it'd only stop at .one, because .one is the first one that delibarately said it to "stop propagating" the event

[@bedribulut]

excellent. thank you so much.

[@pritamaries]

Very well explained !! Thanks a lot Wes

[@WesBos]

Glad it was helpful!

[@DragonWhisky]

​@@WesBos Thank you for this video. It is very helpful and helps me understand why my code works (I somehow used 'this' and it works... and this explains me why) :D

[@kresimircosic3753]

Good explanation, thanks my man.

[@alvarobyrne]

Hi. Great video as aLl of yours. Would you please do/make a video explaining how to properly remove event listeners. Thanks in advance

[@vahanpetrosyan3773]

Please mention that you use your code in footer below the DIVs in html and querySelectorAll is not 'live' so if used in head section above it will not work since divs don't exist at the time of calling this function

[@tramarthomas6105]

Amazing explanation

[@mirage4731]

amazing explanation, thank wes Bos

[@realmumptastic]

Awesome video as always.

[@abdullahimohammedhussain3382]

Odin peeps. Say Hi

[@shadeendas4507]

If you're here from The Odin Project just dont lose hope you can do it

[@jamochl]

Awesome! Thank you!

[@Sdirimohamedsalah]

Excellent

[@Alexandre_Keo]

The Odin Project students, Assemble!

[@benosonline]

thanks bud

[@isurumdev]

What is that IDE?

[@OkanEsen]

Looks like WebStorm from JetBrains.

[@FunnyPaplo]

sublime text 3 + custom font

[@rammyramkumar]

Sublime text + custom cobalt theme + operator mono font

[@ufotofu9]

@@OkanEsen not even close

[@alirezafazeli231]

That's Awesome

[@RodriguezEdwin1324]

great tutorial :)

[@taihatranduc8613]

thank you

[@imranshaikh115]

Awesome Wes :)

[@mrmusculo499]

odin project

[@ousmand742]

i wish there was a codepen

[@ManojKumar-op7ot]

If you can make use of this: github.com/wesbos/JavaScript30

[@shshawon39]

Great

[@sadsixersfan]

didn't mean to click on the world 😅

[@ammarcopelj6747]

we click on universe...hahahhahahaha

[@deivi3697]

JavaScript is casesensitive :d lol