Event Listeners in JavaScript | JavaScript Events Tutorial

In this video we'll learn about Event Listeners in JavaScript with addEventListener. We'll also explore Event Bubbling, Event Capturing, Event Propagation, and Prevent Default Behaviors. We'll look at the click event, readystatechange event, mouseover & mouseout events, and the submit event while using both named and anonymous functions as event handlers. We'll also work with the add, remove, and toggle methods of a classList. Let's get started!

✅ Quick Concepts outline:
JavaScript Event Listeners
(00:00) Intro
(0:20) Insure the DOM is available to interact with
(1:30) How to load your script for DOM interaction
(3:30) Syntax: addEventListener(event, function, useCapture)
(4:50) Using a function name in the event listener
(5:55) Removing a function with a name: removeEventListener()
(6:50) Using an anonymous function in the event listener
(8:50) Listening for the readystatechange event
(10:30) Constructing an initApp() function
(13:30) Event Bubbling
(16:00) Event Capturing
(17:00) Event Propagation and stopPropagation()
(25:05) classList, add, remove, and toggle
(34:50) Listening for a HTML Form submit event
(36:20) HTML Form default behavior

🚀 Source Code Files:
Note: You'll need to change display settings in the CSS for each example.

📚 Further Reading:
MDN Web Docs:

Eloquent JavaScript Chapter 15:

📺 More Beginner JS Videos:

✅ Follow Me:

#event #listeners #javascript

[nikolov]

When the "classList, add, remove and toggle" section of the video came up, I started to feel like a kid in a candy store, where everything is free.

This is so exciting I can't wait to finish this JS course, then the React course and finally turn my web design ecommerce store into a reality. That will be the biggest project on my portfolio and I will utilize it to help me land a position as a frontend intern.

Thank you so much for your videos Dave, I know I've said it a lot of times already, but you are truly a blessing for the web development community, your courses are accessible, of high quality, perfectly ordered and structured and well paced.

[marcusl.]

Dave, your content is highly organised, thorough, and easily digestible. I've decided to use your content as a primary source of learning, so, thanks for all your work. I predict your channel to blow up to 50k-100k subscribers within the 2022 year - I'm saying it now! What I find most appealing on your channel is not only your clear, methodical instruction, but the highly accessible/organised catalogue of content on your channel page. If I need to find instruction on a particular topic, it's not hard to find. Take care all the best.

[VanPetersonKpoti]

I'm at a loss for words to express my gratitude for all the effort that has gone into bringing us this kind of exceptional, high-quality content.
I've decided to follow the Full-Stack course with you.
You have mastered your work.
Thank you very much Mr. Dave.
Your student from Togo (West Africa).

[dansmar_]

Besides the great video you've made, the links in the description also play a huge role. Congrats and thank you so much for creating such content

[bama]

Thank you, Dave! Good job. Still valuable after 3 years. Did not know that you had github link to your css in the description. I trained with my css version and it worked out.

[Grihlo]

I'm really happy that I've found your channel. Thank you for sharing your knowledges!

[CondeAlberto]

I agree with Dan below, the links you provide are golden. I learned some Sass as well in this video.

[jasminvillatoro]

Thank you soo much! This tutorial has helped me a lot understanding JavaScript better.

[Antonio_shortz]

Thanks for making this video. I'm still a bit stuck but have a better understanding

[richardmonne]

So understandable!!! very comprehensive! Thanks a lot man! God bless

[edwilsondasilva]

Hi, your videos are awesome! Continue please.

[saeed]

TOTALLY AWESOME VIDEO!!! Top-quality! It's my first time on your channel, and I'm so impressed, you explain everything so clearly and beautifully, Thank you so much!

[AbhishekYadav-gh]

Around 18:00, while changing useCapture true or false, iI think the events change outwards only in both the cases from h2 to section.
like while useCapture is true in all three (view, div, h2) -> events changes from h2 to section, i.e. outwards.
you referred it should be inwards.

[redMaple_QC]

This one is a little confusing. Codes don't match your result. I get view1 while you start on view2.

[bnmbnm]

22:09 Can you explain why the h2 background color is purple and the div is also purple? I don't understand
Because sometimes I can't read the subtitles

[__zenon]

Hey Dave, you seem to prefer using arrow functions? Is there a reason for that and is there a difference to using the other ways of writing a function? Thanks.

[omcinc]

Hi Dave, I can't seem to load/display "My 2nd View" as seen in the beginning of your tutorial. I copied the source documents and this loads View1. I tried changing css views from flex to none - view1 disappeared, but view 2 does not appear.

[laudlogo]

The source codes files are not what is exactly in the video.
That said it is a very good beginners series.
I wondering which projects to try out after this the series, i really want to practice this.

[noonecares]

Sorry where did you get document.queryselector("h2 +div") there is no class for h2 and div.

[jiweihe]

Your videos are great! For beginners like me to follow. Does the event propagation only work if click is on the innermost element? 16:30