@@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.
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
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.
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!
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!
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
Thank you for the video. Excellent explanation, simple example with explanation of core functionality. Great to understand how events work in JavaScript.
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!
4:57 if you would like to know the general area where it goes over what "capture" is. I know the RUclips player already references it as the "most replayed" area, but just in case people need it.. GL fellow TOP students!
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!
@@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
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 .
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.
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 .
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
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.
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.
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!
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
If you’re here from The Odin Project, keep up the good work:) I’m rooting for you
Yeah @ Tigana
thanks hahahah
lets go brandon
im so confused... even with the previous assignments. He goes too fast and doesnt explain why hes doing what he does
@@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.
Great job on this series, very helpful.
The Odin Project brought me here!:) - Foundations: DOM Manipulation and Events
Here for the same reason. Let's gooo!
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
Odinites!
Odin fam!!
Hello fellow TOP students 👋
OP heroes. Forward!
The additional resources are lethal.
But repeats are what stick it up for long & targets holes.
Thanks you bless you.
This is 5 years old and it help me so much today!! thank you!
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.
6 years ago and the video is still amazing
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!
good luck with the odin project guys!! we will all become aspiring developers one day
good luck same reason
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!
What a fantastic teacher! I love how Wes is able to break down this material in a succinct and easy to digest manner.
Very clear explanation. These concepts were confusing me but this video really helped me to understand each of them. Thank you Wes!
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!
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
The quality of this video is amazing.
Great Explanation , TheOdinProject brought me here, Foundations: DOM Manipulation and Events
Crystal clear explanation! Love the pacing. Thank you!
Came here from TOP. Really helpful.
"But we also clicked on the world"
that bubblated quickly
Thank you! This was an effective, no-nonsense explanation video
Thank you for the video. Excellent explanation, simple example with explanation of core functionality. Great to understand how events work in JavaScript.
"...and you're also clicking on the world" 😂
This is a goldmine of information, thanks so much for this!
CITIZENS OF ODIN. How long has it taken you to get from the very first lesson in the course to this one?
9 days, studying an average of +8h a day everyday
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!
3-4 months, but I'm workingfull time and study about an hour a day after work and 3-5 hours weekend days
2-3 Months for Me, im working fulltime as well but I hammer about 15 hours a week.
well explained from the first 3 mintutes. Very straight to the pain. Thanks
4:57 if you would like to know the general area where it goes over what "capture" is. I know the RUclips player already references it as the "most replayed" area, but just in case people need it.. GL fellow TOP students!
Wes Bos and TOP are the two best resources out there for learning web development
This is excellent explanation Wes Bos, but with capture true, isn't e.stopPropagation() means stop capturing and not stop bubbling
Great job Wes. Thank you for sharing.
Good, but blisteringly fast! Hopefully I can learn more so I can keep up with the pace.
And I was playing at a speed of 2x 😅
Wow.. finally understood everything. Thank you so much!
Thanks for the explanation!
Awesome example. Thanks!
God bless the contributors of the odin project.
Thank you. Your lessons were very helpful.
Damn, this one is very useful! Thank you for videos. Great job !
Thank Wes, "I clicked on the world 🌎🌍 😃", this made my day😄.
Odin peeps. Say Hi
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!
Shift Command Right Arrow (To select whole line) the press Command Forward Slash
Very well explained !! Thanks a lot Wes
Glad it was helpful!
@@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
excellent. thank you so much.
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.
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 .
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.
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 .
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
Good explanation, thanks my man.
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.
Awesome video as always.
Amazing explanation
If you're here from The Odin Project just dont lose hope you can do it
amazing explanation, thank wes Bos
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.
That's OK, it's a syntax snafu on my part. 🙂
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!
Awesome! Thank you!
Excellent
Hi. Great video as aLl of yours. Would you please do/make a video explaining how to properly remove event listeners. Thanks in advance
Awesome Wes :)
great tutorial :)
thanks bud
The Odin Project students, Assemble!
odin project
That's Awesome
thank you
i wish there was a codepen
If you can make use of this: github.com/wesbos/JavaScript30
Great
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
What is that IDE?
Looks like WebStorm from JetBrains.
sublime text 3 + custom font
Sublime text + custom cobalt theme + operator mono font
@@OkanEsen not even close
didn't mean to click on the world 😅
we click on universe...hahahhahahaha
JavaScript is casesensitive :d lol