Learn JavaScript Event Listeners In 18 Minutes

Подписаться 1,6 млн

Просмотров 564 тыс.

50% 1

🚨 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

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 559

@samuelamare3080 3 года назад

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

@chenteramos09 3 года назад

LOL dude thats what i was thinking halfway thru the video

@antoniofuller2331 3 года назад

Lord Sosuke Aizen would like to know your location

@FaBioW114 3 года назад

I have to agree :D

@feranmi_oni8424 2 года назад

honestly😂

@vaguebrownfox 2 года назад

both

@ShinAkuma 3 года назад

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

@bk._550 3 года назад

@Ali-mc4le 3 года назад

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

@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 3 года назад

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

@_shuu9472 3 года назад

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

@Wesley-Insley-Comedy 3 года назад

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 3 года назад

I'm so glad I could help!

@sanghvian 3 года назад

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

@maxathanja 3 года назад

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

@gettingComputey 3 года назад

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

@valeriatapia1128 Год назад

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

@quentina.3021 3 года назад

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

@dsvhs93 3 года назад

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!

@angelsunshine885 2 года назад

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

@ChrispyChris3 2 года назад

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

@oortcloud210 10 месяцев назад

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!

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

@sapindersingh1165 3 года назад

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 3 года назад

same

@KingKongHitDaBong Год назад

dont be stingy with the likes

@sapindersingh1165 Год назад

@@KingKongHitDaBong haha I gave you a like 😄

@pavkey88 3 года назад

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

@davidrowlands8962 3 года назад

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.

@PunkSage 2 года назад

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

@Pareshbpatel 2 года назад

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

@reaperforever8478 3 года назад

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

@chandrakant6283 3 года назад

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.

@richardramirez5746 Год назад

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

@lucianasuciu4798 2 года назад

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

@mayankstylerock 3 года назад

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

@theomegamale5335 2 года назад

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!

@abdullahsoomro6238 Год назад

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

@michaeld663 3 года назад

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

@bmehder 3 года назад

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

@y-yyy Год назад

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

@kingwoodbudo 3 года назад

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!

@parmeetsingh9766 3 года назад

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

@thewetfly9207 Год назад

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

@deniskotov 2 года назад

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

@mrbjjackson 3 года назад

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

@michaelbrauner 3 года назад

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

@user-jo7pd8fj5m 3 года назад

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

@samirkhatri-dev 3 года назад

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

@MecksOnwenu 3 года назад

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

@Born2DoubleUp 2 года назад

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

@bigbtripathi 2 года назад

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

@Ruth5664 2 года назад

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

@aluuusch 2 года назад

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.

@DaddyChronic 2 года назад

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

@adityapardeshi5028 Год назад

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

@ashkanahmadi 2 года назад

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

@louzynerd129 3 года назад

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

@setyvyas2043 2 месяца назад

Very well explained, mate. Kudos!

@raamch 2 года назад

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

@kantyDarius 3 года назад

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

@ug3469 2 года назад

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

@leg875 11 месяцев назад

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

@wilsonemmanuel1352 Год назад

Best JavaScript explanation so far 😊

@tommykelly1007 3 года назад

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

@BillTheChill654 3 года назад

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

@frankiefab 3 года назад

I appreciate your efforts. I learnt something new.

@puspamadak 3 года назад

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

@abhijeetmokale5604 3 года назад

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

@florianhoffmann8127 3 года назад

Thank you so much. Event delegation is a blessing.

@jeffreyjdesir 3 года назад

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

@pbellomagnani Год назад

This viedo is amazing, Thanks Kyle, your explanation is perfect and very useful!

@ameyapatil1139 2 года назад

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

@kenkinyua7036 2 года назад

i learned a lot , this by far the best channel for me in coding ....thanks

@AndrewMelnychuk0seen 2 года назад

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

@pauldodd6909 3 года назад

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

@_wadewilson_ 6 месяцев назад

Hey Kyle just wanted to say thanks for these lovely tutorials

@vimalathithand917 Год назад

the best video on eventlisteners...great video,learned a lot of things.Really helpful ...!Thank you so much..!😄

@echonabin 3 года назад

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

@danyleveque892 3 года назад

As usual ,concise and well explained. Thanks.

@H7forReal Год назад

best tutorial video about event listeners no doubt mane good job!

@zakariairkha2096 2 года назад

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

@jpd8 3 года назад

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.

@eric69969 Год назад

Best explanation ever! Thank you so much!

@imdagz4070 2 года назад

You're legend! This helped me solve my problem!

@ievheniiierokhin1677 3 года назад

Very clear and good explanation, great job!!!

@JohnnyCBCS 2 года назад

very helpful Kyle, thank you so much!

@darpananeja6755 2 года назад

Superb explanation and fully informational video!!

@darshanndk3830 3 года назад

It really was simplified, Kyle! thanks :)

@chander1542 3 года назад

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

@shankarghimire4492 3 года назад

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 2 года назад

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

@charusharma7738 10 месяцев назад

superb explanation kyle keep up the good work

@angadrajsingh4311 3 года назад

Thanks for sharing event delegation code. Cheers to your channel.

@fawwazhosein 3 года назад

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

@soultouchingsongs 3 года назад

You are a treasure of knowledge.. Thank you🙏

@nehagarg1380 2 года назад

This is one of the best video on event listner.

@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🙏❤️

@LanguageSkillz 2 года назад

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

@nightfire777 3 года назад

I'm watching all your videos now, great

@subathraramakrishnan5121 2 года назад

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

@indratejdev3691 Год назад

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

@eo333 2 года назад

You are doing the world a great service!

@ultradevx 3 года назад

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

@zero2herobeatspaul882 3 года назад

Thanks man. You're a great teacher.

@bluesteel1 3 года назад

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

@eidenblock 3 месяца назад

Man, i have to say thank you for you job!

@tan2cang93 3 года назад

thanks, bro. now I know how to implement removeEventListener() correctly

@shawon791 2 года назад

Awesome content man. That's what I needed.

@cuber_dev Год назад

Thanks sir I have learnt so many things from you including advanced css and basics of js now going for advanced js (Modules and js frameworks )

@anaisrevellat5692 2 года назад

Thanks to you I clearly understand now how it really works, moreover now to help me to remember this story about capturing and bubbling, I help myself to remember it with the simple analogy with a sandglass x)