The addEventListener() method attaches an event handler to the specified element without overwriting existing event handlers so you can add many event handlers to one element. You can use removeEventListener() to remove an event.
💻 Code: https://codepen.io/beaucarnes/pen/JNRKXX?editors=1010
🔗 All DOM events: https://developer.mozilla.org/en-US/docs/Web/Events
🐦 Beau Carnes on Twitter: https://twitter.com/carnesbeau
⭐JavaScript Tutorials Playlists⭐
▶JavaScript Basics: https://www.youtube.com/playlist?list=PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5
▶Data Structures and Algorithms: https://www.youtube.com/playlist?list=PLWKjhJtqVAbkso-IbgiiP48n-O-JQA9PJ
▶Design Patterns: https://www.youtube.com/playlist?list=PLWKjhJtqVAbnZtkAI3BqcYxKnfWn_C704
▶ES6: https://www.youtube.com/playlist?list=PLWKjhJtqVAbljtmmeS0c-CEl2LdE-eR_F
▶Clean Code: https://www.youtube.com/playlist?list=PLWKjhJtqVAbkK24EaPurzMq0-kw5U9pJh
–
We’re busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.
Join our community at https://freecodecamp.com
Read great tech articles at https://medium.freecodecamp.com
Original source
11 responses to “addEventListener() – Beau teaches JavaScript”
really good, concise explanation of addEventListener(). It's always good to brush up or have a refresher on pure JavaScript concepts after coding so much in a framework such as VueJS.
Great explanation thank you so much !!!
Loved the video thanks
In the last few seconds of your tutorial, how do you then remove the event listener if it is encapsulated in the function(){ [code here]}?
Hey, I don't know if you're willing to help people struggling, but I need it. I can get the code to work just fine in most scenarios, but when I open my HTML from the browser and link it to my JS, my addEventListener is run instantly. I've gone to stackoverflow to look for a solution, but received no help there. Why isn't it waiting for the event before running?
had a problem with eventlisteners for the past 2 days and the insight you gave on useCapture really helped fix the problem 🙂
but you could build a function to call many times you want the onclick event!!
Hi Beau..Thanks for making all these videos..They are life changing and are really Awesome. I am learning a lot of new things everYday. Just wanna know are there any videos for memory leaks in javscript you did?
You can learn this in 30s by going into developer.mozilla.org.
any thoughts on a known website no longer using cascading style sheets
http://www.reddit.com/r/modnews/comments/66q4is/the_web_redesign_css_and_mod_tools
?
Why do we need to remove eventListener? when we do not clear normal click functions?