Event Listeners in JavaScript | JavaScript Events Tutorial

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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!
▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here: • Javascript Tutorials f...
✅ 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()
(21:45) event.target usage
(25:05) classList, add, remove, and toggle
(34:50) Listening for a HTML Form submit event
(36:20) HTML Form default behavior
(37:00) Prevent default behavior with event.preventDefault()
🚀 Source Code Files:
🔗 HTML: gist.github.com/gitdagray/7d1...
🔗 CSS: gist.github.com/gitdagray/cf6...
Note: You'll need to change display settings in the CSS for each example.
📚 Further Reading:
MDN Web Docs:
Introduction to events: developer.mozilla.org/en-US/d...
Event reference: developer.mozilla.org/en-US/d...
addEventListener: developer.mozilla.org/en-US/d...
readyState: developer.mozilla.org/en-US/d...
Eloquent JavaScript Chapter 15:
eloquentjavascript.net/15_eve...
📺 More Beginner JS Videos:
freeCodeCamp: • Learn JavaScript - Ful...
Traversy Media: • JavaScript Crash Cours...
The Net Ninja: • Modern JavaScript Tuto...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
#event #listeners #javascript

[@9nikolov]

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.

[@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).

[@marcusl.5785]

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.

[@DaveGrayTeachesCode]

Thank you, Marcus! I sincerely appreciate the kind words and prediction 🙏💯🚀

[@Grihlo]

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

[@DaveGrayTeachesCode]

You're welcome! 💯

[@dansmar_2414]

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

[@DaveGrayTeachesCode]

Thank you for the kind words, Dan! 🙏💯

[@bama2619]

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.

[@davidbugatti2159]

You explain it really well, ty

[@DaveGrayTeachesCode]

Thank you!

[@richardmonne7212]

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

[@DaveGrayTeachesCode]

You're very welcome! 🙏🚀

[@samer3161]

7 more tutorials to go :p Thanks Dave!

[@jasminvillatoro162]

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

[@DaveGrayTeachesCode]

Great to hear! And you're welcome! 🙏🚀

[@edwilsondasilva9946]

Hi, your videos are awesome! Continue please.

[@DaveGrayTeachesCode]

Will do! Thank you! 💯

[@CondeAlberto]

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

[@DaveGrayTeachesCode]

Thank you, Alberto! The traditional academic in me insists on the references 😀

[@Antonio_shortz]

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

[@DaveGrayTeachesCode]

Glad I could help 💯

[@mostafasalaheldin812]

Thanks for the hard work

[@DaveGrayTeachesCode]

Much appreciated 🙏

[@saeed7996]

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!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@user-mv2ec9iv5z]

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.

[@jiweihe3413]

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

[@DaveGrayTeachesCode]

It needs to be a child to bubble up for example but it does not have to be the innermost child element.

[@__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.

[@DaveGrayTeachesCode]

Arrow functions are considered function expressions. I do like arrow functions. It is good to know both. Lately, when working with Next.js, I have found myself writing more traditional functions with the function keyword again.

[@redMaple_QC]

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

[@dannyvista533]

Hello Dave, hope all is well. I'm new to Javascript and I'm wondering what does the view.querySelector and div.querySelector means compare to document.querySelector?

[@DaveGrayTeachesCode]

Hi Danny, the tutorial right before this one in my Javascript for Beginners series covers how these selectors are created: kzbin.info/www/bejne/jZOqaWmpgslmibc

[@dannyvista533]

@@DaveGrayTeachesCode Thank you very much for responding Dave! I got to watch that video to learn more about the DOM. More power to your channel.

[@laudlogo7057]

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.

[@DaveGrayTeachesCode]

Thank you, Laud! I have a few projects on my channel for Vanilla JS. 💯

[@bnmbnm7278]

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

[@DaveGrayTeachesCode]

We are attaching event listeners and listening for a click on these elements. When clicked, we are changing the background color. Just after 21:00, we change the target from the view variable to the event.target. This begins on line 17. I really cannot explain the video in the comments as well as simply suggesting to watch the video again. Follow what I do in the code.

[@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.

[@DaveGrayTeachesCode]

Go back over the video again. I show how to achieve this.

[@OlaRsk]

Which part of the video please ? ​@@DaveGrayTeachesCode

[@noonecares6816]

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

[@DaveGrayTeachesCode]

No class needed. You can select HTML elements, too. Any selector you might use in CSS could be a selector here.

[@noonecares6816]

@@DaveGrayTeachesCode Understood, thanks.

[@plamenpetkov746]

Is there a repo for this lesson?

[@DaveGrayTeachesCode]

No repo for this one. I didn't create many for the beginning JS tutorials. I think it helps students when they type it out themselves. Thanks for asking!

[@plamenpetkov746]

@@DaveGrayTeachesCode I was just searching for the Scss files since I still don't know it because its little different from the ordinary CSS :D. Thanks :)

[@DaveGrayTeachesCode]

I have created a gist for the HTML - gist.github.com/gitdagray/7d1676f2503c987fe22e2a8c10926426 and a gist for the CSS - gist.github.com/gitdagray/cf6256c62fad399e056d8e7187950c73 . You'll need to change display settings for each example.

[@adeoluadeyinka6542]

@@DaveGrayTeachesCode these links are not working

[@DaveGrayTeachesCode]

@@adeoluadeyinka6542 they do now. KZbin was adding the closing ) to the links so I removed the ( ) surrounding the links.

[@sparshverma1369]

Can I get the code of those sass files ?

[@DaveGrayTeachesCode]

I have created a gist for the HTML (gist.github.com/gitdagray/7d1676f2503c987fe22e2a8c10926426) and a gist for the CSS (gist.github.com/gitdagray/cf6256c62fad399e056d8e7187950c73). You'll need to change display settings for each example.

[@sparshverma1369]

@@DaveGrayTeachesCode Thanks

[@jperfection]

You could use this instead of setting it on each side: event. target. textContent = (myText === "My 2nd View") ? "clicked" : "My 2nd View";

[@DaveGrayTeachesCode]

True. Not 100% sure if that would be more readable for beginners (target audience of these videos), but yes, I could have.

[@user-jl6iz6ij6m]

Please use better sound. Thanks

[@DaveGrayTeachesCode]

I currently do. Note you made your comment on a video that is over two years old. I have continued to improve over that time.