Event Listeners in JavaScript | JavaScript Events Tutorial
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: • Javascript Tutorials for Beginners
✅ 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/7d1...
🔗 CSS: https://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: https://developer.mozilla.org/en-US/d...
Event reference: https://developer.mozilla.org/en-US/d...
addEventListener: https://developer.mozilla.org/en-US/d...
readyState: https://developer.mozilla.org/en-US/d...
Eloquent JavaScript Chapter 15:
https://eloquentjavascript.net/15_eve...
📺 More Beginner JS Videos:
freeCodeCamp: • Learn JavaScript - Full Course for Beginners
Traversy Media: • JavaScript Crash Course For Beginners
The Net Ninja: • Modern JavaScript Tutorial #1 - Intro & Setup
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: https://yesdavidgray.com
Reddit: / daveoneleven
#event #listeners #javascript
Auf dieser Seite können Sie das Online-Video Event Listeners in JavaScript | JavaScript Events Tutorial mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Dave Gray 20 Oktober 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 31,267 Mal angesehen und es wurde von 611 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
