Learn JavaScript Event Listeners In 18 Minutes

🚨 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

Пікірлер: 555

  • @samuelamare3080
    @samuelamare30803 жыл бұрын

    I don't know what's more perfect, this guy's tutorials or his hair!

  • @chenteramos09

    @chenteramos09

    2 жыл бұрын

    LOL dude thats what i was thinking halfway thru the video

  • @antoniofuller2331

    @antoniofuller2331

    2 жыл бұрын

    Lord Sosuke Aizen would like to know your location

  • @FaBioW114

    @FaBioW114

    2 жыл бұрын

    I have to agree :D

  • @feranmi_oni8424

    @feranmi_oni8424

    2 жыл бұрын

    honestly😂

  • @vaguebrownfox

    @vaguebrownfox

    2 жыл бұрын

    both

  • @ShinAkuma
    @ShinAkuma3 жыл бұрын

    This is the hands down the best tutorial I've ever seen on event listeners.

  • @bk._550

    @bk._550

    3 жыл бұрын

    ok

  • @Ali-mc4le

    @Ali-mc4le

    3 жыл бұрын

    www.udemy.com/course/coding-interview-crash-course-for-web-developer-2020/?couponCode=ADA6B72288D49A1CAE25

  • @AndrewTSq

    @AndrewTSq

    3 жыл бұрын

    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.

  • @silentxcure

    @silentxcure

    3 жыл бұрын

    @@AndrewTSq This is the hands down the best response to a comment I've ever seen on videos on event listeners.

  • @_shuu9472

    @_shuu9472

    2 жыл бұрын

    To me he's the best tutor i've ever found on the internet

  • @Wesley-Insley-Comedy
    @Wesley-Insley-Comedy3 жыл бұрын

    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!

  • @WebDevSimplified

    @WebDevSimplified

    3 жыл бұрын

    I'm so glad I could help!

  • @sanghvian
    @sanghvian3 жыл бұрын

    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 !!!

  • @sapindersingh1165
    @sapindersingh11653 жыл бұрын

    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!

  • @bk._550

    @bk._550

    3 жыл бұрын

    same

  • @KingKongHitDaBong

    @KingKongHitDaBong

    Жыл бұрын

    dont be stingy with the likes

  • @sapindersingh1165

    @sapindersingh1165

    Жыл бұрын

    @@KingKongHitDaBong haha I gave you a like 😄

  • @maxathanja
    @maxathanja3 жыл бұрын

    Wow, this is just what I need at the moment. You’re a lifesaver, thanks!

  • @gettingComputey
    @gettingComputey3 жыл бұрын

    I've seen a lot of event listener tutorials and this one is best explained. Thank you!

  • @pavkey88
    @pavkey883 жыл бұрын

    Not only is this a great tutorial on event listeners, it’s also a great way to approach learning how to debug

  • @oortcloud210
    @oortcloud2109 ай бұрын

    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!

  • @ChrispyChris3
    @ChrispyChris32 жыл бұрын

    The way dude talks super chill and laid back, while not being monotone, AND explaining things well is pretty amazing!

  • @valeriatapia1128
    @valeriatapia1128 Жыл бұрын

    I FINALLY UNDERSTAND event listeners!! Thanks Kyle!! You're a life saver!

  • @dsvhs93
    @dsvhs933 жыл бұрын

    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!

  • @quentina.3021
    @quentina.30213 жыл бұрын

    Man, you are an awesome teacher! Best explanation/tutorial of event listeners I’ve ever seen.

  • @michaeljohnson1576
    @michaeljohnson1576 Жыл бұрын

    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!

  • @reaperforever8478
    @reaperforever84783 жыл бұрын

    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

  • @y-yyy
    @y-yyy Жыл бұрын

    So clear, pleasant to listen to and to the point. You're a legend, thank you!

  • @angelsunshine885
    @angelsunshine8852 жыл бұрын

    You Sir, my FANTASTIC teacher! Thank you from the bottom of my heart for providing such valuable and well-explained content!

  • @chandrakant6283
    @chandrakant62833 жыл бұрын

    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.

  • @davidrowlands8962
    @davidrowlands89623 жыл бұрын

    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.

  • @bmehder
    @bmehder3 жыл бұрын

    I never knew how much I didn't know about event listeners. Excellent tut as usual.

  • @theomegamale5335
    @theomegamale53352 жыл бұрын

    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!

  • @louzynerd129
    @louzynerd1293 жыл бұрын

    What a coincidence i just started learning js a week ago perfect timing man!

  • @parmeetsingh9766
    @parmeetsingh97663 жыл бұрын

    Clean . Crisp . To the point . Hands down , thank god it was the first tutorial i saw

  • @PunkSage
    @PunkSage2 жыл бұрын

    Excellent explanation. I think that a difference between stopPropagation vs stopImmediatePropagation was also worth mentioning.

  • @michaeld663
    @michaeld6633 жыл бұрын

    Thanks solved my problem with the event delegation. I spent like an hour trying to figure it out.

  • @mrbjjackson
    @mrbjjackson3 жыл бұрын

    Dude this helped clarify all my confusion about events so well. Thanks.

  • @Ruth5664
    @Ruth5664 Жыл бұрын

    This is the clearest and neatest that the Event Listeners can get. Thanks buddy!

  • @kingwoodbudo
    @kingwoodbudo3 жыл бұрын

    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!

  • @BillTheChill654
    @BillTheChill6543 жыл бұрын

    Sweet, I’ve been trying to track down some info on these. Thanks!

  • @michaelbrauner
    @michaelbrauner3 жыл бұрын

    Oh dude. I like how your break it down and structure your tutorials. Very good.

  • @richardramirez5746
    @richardramirez5746 Жыл бұрын

    It's really useful to watch your videos. You keep the same calmed speaking.. I appreciate that!

  • @abdullahsoomro6238
    @abdullahsoomro6238 Жыл бұрын

    I watched this video 2 times. To really understand the event bubbling and event capturing. You taught it really nice and simple way.❤

  • @Pareshbpatel
    @Pareshbpatel2 жыл бұрын

    Listen up! - This is, by far , the best tutorial on event listeners I have ever come across. Thank you, Kyle {2021-06-29}

  • @lucianasuciu4798
    @lucianasuciu47982 жыл бұрын

    You're my favorite professor :))) Your videos are amazing , i learned a lot . Thank you so much for your work !

  • @kantyDarius
    @kantyDarius3 жыл бұрын

    Man... You are a real web dev simplifier👏

  • @deniskotov
    @deniskotov2 жыл бұрын

    Your channel is a chest of gold for me! Thanks a lot!

  • @samirkhatri-dev
    @samirkhatri-dev3 жыл бұрын

    Kyle does good and in-depth research regarding any topic. Best Video.

  • @bigbtripathi
    @bigbtripathi2 жыл бұрын

    This is the best explanation of event listeners that I have found in youtube so far.

  • @user-jo7pd8fj5m
    @user-jo7pd8fj5m3 жыл бұрын

    This is a breath-takingly good clarification. Subscribed for sure.

  • @mayankstylerock
    @mayankstylerock3 жыл бұрын

    The best video of Js and u truly do justice with your channel name "Simplified". Thanks for your hard work man

  • @MecksOnwenu
    @MecksOnwenu3 жыл бұрын

    This is very informative. Eventlisteners are a real deal in JavaScript DOM interactions.

  • @Born2DoubleUp
    @Born2DoubleUp2 жыл бұрын

    you explain things so well... im watching all your lessons.

  • @frankiefab
    @frankiefab3 жыл бұрын

    I appreciate your efforts. I learnt something new.

  • @danyleveque892
    @danyleveque8923 жыл бұрын

    As usual ,concise and well explained. Thanks.

  • @alexburke566
    @alexburke5663 жыл бұрын

    Thank you Kyle, I was just looking something like that. 🤘

  • @jeffreyjdesir
    @jeffreyjdesir3 жыл бұрын

    You're such a gem, I wish I could bundle you 💎

  • @florianhoffmann8127
    @florianhoffmann81273 жыл бұрын

    Thank you so much. Event delegation is a blessing.

  • @bluesteel1
    @bluesteel13 жыл бұрын

    hidden gem ... kyle's once of the best instructors out there

  • @thewetfly9207
    @thewetfly9207 Жыл бұрын

    Add Event Listener for future elements blow my mind. Respect 😎

  • @darshanndk3830
    @darshanndk38303 жыл бұрын

    It really was simplified, Kyle! thanks :)

  • @ug3469
    @ug34692 жыл бұрын

    Thank you very much for covering so many options for event listeners

  • @kirksurber7262
    @kirksurber7262 Жыл бұрын

    just spent 12 hours yesterday trying to figure why a delete button wouldn't function on a shopping list I'm making. Here you are explaining it in minutes lol

  • @adityapardeshi5028
    @adityapardeshi5028 Жыл бұрын

    The last one - adding the globalEventListener is a really good trick. Thanks man

  • @azuboof
    @azuboof7 ай бұрын

    wait how the fuck am i understanding it all even when im tired and sleepy and not putting 100% attention its just flowing into my ears, the explanation is so simple and good. Thank you goat

  • @echonabin
    @echonabin3 жыл бұрын

    I'm just searching for this and you just upload it lol, what a coincidence... Great content Kyle ❤️❤️

  • @puspamadak
    @puspamadak3 жыл бұрын

    Wish I got this video before! As always, you have explained everything in a very simple and easy way.

  • @pauldodd6909
    @pauldodd69093 жыл бұрын

    Really easy to understand video of events and event listeners in JavaScript. Thank you.

  • @suzannealivand7188
    @suzannealivand71882 жыл бұрын

    thank you! this tutorial is great and I've learned a lot 😊

  • @ievheniiierokhin1677
    @ievheniiierokhin16773 жыл бұрын

    Very clear and good explanation, great job!!!

  • @ameyapatil1139
    @ameyapatil11392 жыл бұрын

    wow dude, this is super easy and extremely informative ! splendid job.

  • @aluuusch
    @aluuusch2 жыл бұрын

    It's a very good tutorial. That being said you might wanna show the html-file shortly in the beginning of the video - just for a better understanding.

  • @mirel4246
    @mirel42463 жыл бұрын

    Thank you for this awesome tutorial! It helped me a lot :D

  • @jsmastery1931
    @jsmastery19312 жыл бұрын

    dude i swear u have special talent in simplifying stuff.....

  • @ashkanahmadi
    @ashkanahmadi2 жыл бұрын

    I was scratching my head for DAYS how to solve the event delegation problem. This finally solved my problem. THANK YOU

  • @sudhakardhayalan8874
    @sudhakardhayalan88742 жыл бұрын

    @webdevsimplified Hi Kyle, Can you teach in-depth concepts of event listeners like mouseover, focus, blur and on which tag elements these won't work, how to resolve it. It would be really useful if you could do a video on these things... You're awesome at mentoring and keep rocking. Thanks a ton for your efforts.

  • @ultradevx
    @ultradevx3 жыл бұрын

    Thanks for sharing! You have taught me a lot! 😀

  • @kalyanp7857
    @kalyanp78572 жыл бұрын

    Teaching is an art but with precision is what Kyle has! I have been a backend guy for 04 years but now I want to do some cool UI stuff your videos are helping a lot. Thanks mate!

  • @sallylauper8222

    @sallylauper8222

    2 жыл бұрын

    I thought backend guys knew everything?

  • @DaddyChronic
    @DaddyChronic2 жыл бұрын

    I am doing JS since 1998 and learned a lot. Thank You

  • @khadijaaitbouiramouin7776
    @khadijaaitbouiramouin77763 жыл бұрын

    That's perfect soo helpful , clean and clear 👍

  • @subathraramakrishnan5121
    @subathraramakrishnan5121 Жыл бұрын

    Thanks a lot .crystal clear and very helpful information on event listeners

  • @zero2herobeatspaul882
    @zero2herobeatspaul8823 жыл бұрын

    Thanks man. You're a great teacher.

  • @shankarghimire4492
    @shankarghimire44922 жыл бұрын

    Thank you so much, lol! I was having headache due to the similar issues on my assignment and finally your this video tutorial helped me solve the issue. I am so grateful to you. Thanks once for sharing your knowledge and skills with the world! :)

  • @itboardroom5085

    @itboardroom5085

    2 жыл бұрын

    can't say having headache say have headache or feel pain in my head

  • @AndrewMelnychuk0seen
    @AndrewMelnychuk0seen2 жыл бұрын

    I'm coming from C++ and python and your videos have made me way less mad at javascript. Keep up the great work.

  • @fawwazhosein
    @fawwazhosein3 жыл бұрын

    Good video man! One thing which is also important is the closest function.

  • @vincentjohnflorio
    @vincentjohnflorio2 жыл бұрын

    The beauty of the event delegation at the end is that it's a conventional event listener on the one "element" that there can't be more of and would never need delegation. You produce new things within it, but never a new "it" entirely. So it's a "live" content check.

  • @LanguageSkillz
    @LanguageSkillz2 жыл бұрын

    Love the attn to capture events! Can't find it more fully explored anywhere else.

  • @Bebsi42069
    @Bebsi42069 Жыл бұрын

    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

  • @raamch
    @raamch2 жыл бұрын

    You're a leader... Who inspires many and leads the beginner warriors.

  • @soultouchingsongs
    @soultouchingsongs3 жыл бұрын

    You are a treasure of knowledge.. Thank you🙏

  • @milanpavlovic8141
    @milanpavlovic81412 жыл бұрын

    Really well explained, bravo!

  • @jpd8
    @jpd83 жыл бұрын

    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.

  • @jaganraajan
    @jaganraajan2 жыл бұрын

    Insightful tutorial! Learnt a lot

  • @JohnnyCBCS
    @JohnnyCBCS2 жыл бұрын

    very helpful Kyle, thank you so much!

  • @zakariairkha2096
    @zakariairkha20962 жыл бұрын

    Thank u much. U literally just solved my life with that event delegation.

  • @chander1542
    @chander15423 жыл бұрын

    Looks like from the next. I dont have read docs for applying event listener. Thank you for the simplest explanation

  • @abhijeetmokale5604
    @abhijeetmokale56042 жыл бұрын

    I've always wondered what does the third parameter in event listener does and Thanks to you !!!! your way of explaining makes everything easy to understand...love from INDIA !!!

  • @aneeqak
    @aneeqak3 жыл бұрын

    u r my mentor, U made the whole web alot more simpler and interesting

  • @TheCodingOdyssey

    @TheCodingOdyssey

    3 жыл бұрын

    because its Web Dev Simplified :P

  • @indratejdev3691
    @indratejdev3691 Жыл бұрын

    When it comes to webdevelopment. he is one of the youtuber who explains simple,crisp and clear. Thank you so much.

  • @haminpark2981
    @haminpark29813 жыл бұрын

    this is really helpful, thank you

  • @aimeYM1
    @aimeYM13 жыл бұрын

    Great Video. I like the way you explain complex topics and make them easy to digest. By the way, I checked your new JS course and somehow the registration is closed till March. Any reason why? Keep up the good work. Your way of teaching is fantastic.

  • @wilsonemmanuel1352
    @wilsonemmanuel1352 Жыл бұрын

    Best JavaScript explanation so far 😊

  • @OrmHaxanThle
    @OrmHaxanThle Жыл бұрын

    I've brought so many content about JS, Node.js , ALGORITHMS, Design Patters from different instructors and I have NEVER been able to understand any of these in such depth as Kyle makes me do.

  • @mihaipascu4975
    @mihaipascu49752 жыл бұрын

    Thanks, Kyle!!! Very interesting and util tutorial!

  • @eXit-mm3zg
    @eXit-mm3zg Жыл бұрын

    So helpful! Thank you!

  • @shawon791
    @shawon7912 жыл бұрын

    Awesome content man. That's what I needed.

  • @leg875
    @leg87510 ай бұрын

    Quality teaching. Seen couple of videos and landed here, you brought smile into my face. Narration matters :)

  • @tommykelly1007
    @tommykelly10073 жыл бұрын

    Great video. After watching your videos you have inspired me to make my own KZread videos I feel I am finally ready to do so. Thanks

  • @skyy_banerjee
    @skyy_banerjee3 жыл бұрын

    Love that Jackson guitar!

  • @CoryJaccino
    @CoryJaccino3 жыл бұрын

    This is one of many reasons why I’ve bought all of his courses.

  • @CoryJaccino

    @CoryJaccino

    3 жыл бұрын

    I’d love to see another video on that last part - or even a course - on React (or Angular since I’m starting to learn observables) and event listener best practices. The more projects the better. Thanks for this great video, Kyle!

  • @WebDevSimplified

    @WebDevSimplified

    3 жыл бұрын

    Thank you so much for the support. I will keep this in mind for when I update my React course.

  • @Ali-mc4le

    @Ali-mc4le

    3 жыл бұрын

    www.udemy.com/course/coding-interview-crash-course-for-web-developer-2020/?couponCode=ADA6B72288D49A1CAE25

  • @CoryJaccino

    @CoryJaccino

    3 жыл бұрын

    @@WebDevSimplified Hey Kyle, I think Ali is on to something. You could make an awesome course on data structures, especially as they are used in the frontend. You could teach it in JavaScript and then show it in React or even in various libraries like Angular, Vue, etc. That would give your courses even more breadth / exposure. Just throwing it out there.

  • @bassfreack
    @bassfreack Жыл бұрын

    I love your videos!!!thank you so I much please keep them coming!!❤️❤️as a musician I would recommend using a De esser compression for your explanations and talking🙏❤️