• Tuesday , 2 June 2020

addEventListener() – Beau teaches JavaScript

Code Canyon

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

3d Ocean

Related Posts


  1. Albert Chang
    December 22, 2018 at 12:55

    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.

  2. Armen Nagapetian
    December 22, 2018 at 12:55

    Great explanation thank you so much !!!

  3. Gamoloco Videos
    December 22, 2018 at 12:55

    Loved the video thanks

  4. George Aguila
    December 22, 2018 at 12:55

    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]}?

  5. trenvert123
    December 22, 2018 at 12:55

    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?

  6. Sonjeet Paul
    December 22, 2018 at 12:55

    had a problem with eventlisteners for the past 2 days and the insight you gave on useCapture really helped fix the problem 🙂

  7. Ahsath
    December 22, 2018 at 12:55

    but you could build a function to call many times you want the onclick event!!

    December 22, 2018 at 12:55

    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?

  9. Nazar Maksymchuk
    December 22, 2018 at 12:55

    You can learn this in 30s by going into developer.mozilla.org.

  10. Luke Dupree
    December 22, 2018 at 12:55

    any thoughts on a known website no longer using cascading style sheets

  11. vijays code
    December 22, 2018 at 12:55

    Why do we need to remove eventListener? when we do not clear normal click functions?

Leave A Comment

You must be logged in to post a comment.