Web Dev Roadmap for Beginners (Free!): https://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: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Oi6xNtL_fwCrwpuqylMsgT

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: https://gist.github.com/gitdagray/7d1676f2503c987fe22e2a8c10926426
CSS: https://gist.github.com/gitdagray/cf6256c62fad399e056d8e7187950c73
Note: You'll need to change display settings in the CSS for each example.

Further Reading:
MDN Web Docs:
Introduction to events: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
Event reference: https://developer.mozilla.org/en-US/docs/Web/Events
addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
readyState: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Eloquent JavaScript Chapter 15:
https://eloquentjavascript.net/15_event.html

More Beginner JS Videos:
freeCodeCamp: https://youtu.be/PkZNo7MFNFg
Traversy Media: https://youtu.be/hdI2bqOjy3c
The Net Ninja: https://youtu.be/iWOYAxlnaww

Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

#event #listeners #javascript