Learn JavaScript Event Listeners In 18 Minutes
HTML-код
- Опубликовано: 13 июн 2024
- 🚨 IMPORTANT:
JavaScript Simplified Course: javascriptsimplified.com
JavaScript events are one of the most important topics for you to learn. In this video I will dive into everything you need to know about JavaScript events to make sure you completely understand how they work.
📚 Materials/References:
Arrow Functions Video: • JavaScript ES6 Arrow F...
Event Listener Article: blog.webdevsimplified.com/202...
🧠 Concepts Covered:
- addEventListener
- Capture phase
- Bubble phase
- removeEventListener
- Event delegation
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:56 - addEventListener Basics
03:52 - Event Bubbling/Capturing
09:12 - Stopping Event Propagation
10:45 - Run Event Only Once
11:19 - removeEventListener
13:17 - Event Delegation
17:48 - Outro
#EventListener #WDS #JavaScript
I don't know what's more perfect, this guy's tutorials or his hair!
LOL dude thats what i was thinking halfway thru the video
Lord Sosuke Aizen would like to know your location
I have to agree :D
honestly😂
both
This is the hands down the best tutorial I've ever seen on event listeners.
ok
www.udemy.com/course/coding-interview-crash-course-for-web-developer-2020/?couponCode=ADA6B72288D49A1CAE25
This is the hands down the best comment I've ever seen on videos on event listeners. :-) No he is a good guy who do great videos.
@@AndrewTSq This is the hands down the best response to a comment I've ever seen on videos on event listeners.
To me he's the best tutor i've ever found on the internet
WDS is so nice. no "WHATS UP GUYS AND TODAAY WE ARE LEARNINGGG" - nope. Just a nice, calm, easy to listen to voice and concise and succinct explanations. six months ago I didn't know the difference between the different css selectors and now I am comfortable with react & have started working with firebase. MOST of that came knowledge came from this channel. Couldn't be more grateful. Thanks dude!
I'm so glad I could help!
Been coding in JS for 25 years and didn't know about doing a matches call on an event object.
It's why I look at videos like this now and then. To refresh and also because you are always learning something new!
I rarely like a video on youtube and this one deserves it. These 18 minutes just leveled up my knowledge about event listeners. Thanks Kyle!
same
dont be stingy with the likes
@@KingKongHitDaBong haha I gave you a like 😄
It's just unreal how amazing you are at teaching new concepts as well as making us rethink learnt ones with a fresh and novel direction. Thanks a lot !!!
The way dude talks super chill and laid back, while not being monotone, AND explaining things well is pretty amazing!
Wow, this is just what I need at the moment. You’re a lifesaver, thanks!
I've seen a lot of event listener tutorials and this one is best explained. Thank you!
I FINALLY UNDERSTAND event listeners!! Thanks Kyle!! You're a life saver!
Man, you are an awesome teacher! Best explanation/tutorial of event listeners I’ve ever seen.
You Sir, my FANTASTIC teacher! Thank you from the bottom of my heart for providing such valuable and well-explained content!
Not only is this a great tutorial on event listeners, it’s also a great way to approach learning how to debug
Look at that fresh fade! Thanks Kyle for the lesson! Will have to watch this a little later on! But I already know it’s awesome!
Listen up! - This is, by far , the best tutorial on event listeners I have ever come across. Thank you, Kyle
{2021-06-29}
It's really useful to watch your videos. You keep the same calmed speaking.. I appreciate that!
Already knew this stuff, but definitely a great video for those newer to events in js and i still enjoyed watching regardless. Keep up the good work!
Hey there, Web Dev Simplified! I just wanted to say that your video on avoiding getting stuck on JavaScript by doing simple things really helped me. Since then, I have attempted to change the way I study JavaScript and while I can't say that I'm striding, I'm definitely moving at a faster pace. I hope you realize just how much you mean to us! Like seriously, your calm mentoring demeanor alone makes these lessons so much more watchable. Thanks a ton!
I've been struggling to understand Delegation & Event Flow, but thanx to this guy now I've understood it well and likely will never forget.
You're my favorite professor :))) Your videos are amazing , i learned a lot . Thank you so much for your work !
Add Event Listener for future elements blow my mind. Respect 😎
I never knew how much I didn't know about event listeners. Excellent tut as usual.
So clear, pleasant to listen to and to the point. You're a legend, thank you!
The best video of Js and u truly do justice with your channel name "Simplified". Thanks for your hard work man
Your channel is a chest of gold for me! Thanks a lot!
Clean . Crisp . To the point . Hands down , thank god it was the first tutorial i saw
This is the best explanation of event listeners that I have found in youtube so far.
Kyle does good and in-depth research regarding any topic. Best Video.
This is the clearest and neatest that the Event Listeners can get. Thanks buddy!
Thanks solved my problem with the event delegation. I spent like an hour trying to figure it out.
Dude this helped clarify all my confusion about events so well. Thanks.
I had understood bubbling since we commonly deal with it, but never really got my head around capturing until this video. Now I understand the third argument in the event parameters. This video has made it crystal clear to me. Thanks very much.
you explain things so well... im watching all your lessons.
Man... You are a real web dev simplifier👏
Oh dude. I like how your break it down and structure your tutorials. Very good.
This is a breath-takingly good clarification. Subscribed for sure.
Excellent explanation. I think that a difference between stopPropagation vs stopImmediatePropagation was also worth mentioning.
Best explanation ever! Thank you so much!
This has made my day , I have been working on a routine app to better schedule my classes , in vanilla js with ejs as a templating engine , used a event listener to attach to a modal for picking the time but I needed some way to delete the event listener after I'm done otherwise it would change all the dates at once , this has saved soo much time
Very well explained, mate. Kudos!
Best JavaScript explanation so far 😊
You're a leader... Who inspires many and leads the beginner warriors.
I appreciate your efforts. I learnt something new.
The last one - adding the globalEventListener is a really good trick. Thanks man
This viedo is amazing, Thanks Kyle, your explanation is perfect and very useful!
I watched this video 2 times. To really understand the event bubbling and event capturing. You taught it really nice and simple way.❤
You're legend! This helped me solve my problem!
Hey Kyle just wanted to say thanks for these lovely tutorials
You're such a gem, I wish I could bundle you 💎
i learned a lot , this by far the best channel for me in coding ....thanks
Thank you so much. Event delegation is a blessing.
When it comes to webdevelopment. he is one of the youtuber who explains simple,crisp and clear. Thank you so much.
As usual ,concise and well explained. Thanks.
This is very informative. Eventlisteners are a real deal in JavaScript DOM interactions.
I was scratching my head for DAYS how to solve the event delegation problem. This finally solved my problem. THANK YOU
Sweet, I’ve been trying to track down some info on these. Thanks!
very helpful Kyle, thank you so much!
Thank you very much for covering so many options for event listeners
best tutorial video about event listeners no doubt mane good job!
Quality teaching. Seen couple of videos and landed here, you brought smile into my face. Narration matters :)
What a coincidence i just started learning js a week ago perfect timing man!
Superb explanation and fully informational video!!
It really was simplified, Kyle! thanks :)
This is one of the best video on event listner.
Kyle your an awesome guy. You explain things thoroughly and clearly. Your pacing is perfect and the visuals you use are informative and easy to read. Keep being awesome man.
You are doing the world a great service!
dude i swear u have special talent in simplifying stuff.....
wow dude, this is super easy and extremely informative ! splendid job.
Very clear and good explanation, great job!!!
the best video on eventlisteners...great video,learned a lot of things.Really helpful ...!Thank you so much..!😄
Thank u much. U literally just solved my life with that event delegation.
I'm just searching for this and you just upload it lol, what a coincidence... Great content Kyle ❤️❤️
Thanks for sharing event delegation code. Cheers to your channel.
hidden gem ... kyle's once of the best instructors out there
So helpful! Thank you!
Really easy to understand video of events and event listeners in JavaScript. Thank you.
superb explanation kyle keep up the good work
Man, i have to say thank you for you job!
Thanks man. You're a great teacher.
This was great. Kind of spooky at the same time as I've been working on a project at work this last week involving bubbling and how to get the tool tips to only show up for the element I've on, not the parent. Lots of other good info that I plan on using. Thank you very much!
Concise and Comprehensive !!
I am doing JS since 1998 and learned a lot. Thank You
Wish I got this video before! As always, you have explained everything in a very simple and easy way.
u r my mentor, U made the whole web alot more simpler and interesting
because its Web Dev Simplified :P
Really useful, thanks Kyle!
Thanks, Kyle!!! Very interesting and util tutorial!
You are gold. Thanks a lot!
Thanks a lot .crystal clear and very helpful information on event listeners
One of the best channels on RUclips!
I'm watching all your videos now, great
Awesome content man. That's what I needed.
Thank you very much, great show.
When looking for to wrap 1 click event listener around multiple buttons but have each button do it's own thing this pops up and is an absolute god send, now I can clean up my clunky code and publish my Accessibility extention!!!!!! Finally after weeks of errors a solution arrives in hair slick back
Thank you Kyle, I was just looking something like that. 🤘
You are a treasure of knowledge.. Thank you🙏
thank you! this tutorial is great and I've learned a lot 😊
Mate, this is the best channel on youtube.
Insightful tutorial! Learnt a lot
Thanks for sharing! You have taught me a lot! 😀
you are great dude! always good tutorials👌