addEventListener() - Beau teaches JavaScript

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.

⭐JavaScript Tutorials Playlists⭐

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

[CknSalad]

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.

[paudelamarianaoancea]

very nice!! i am still confused but i will keep on watching 20 more times.good job

[kingj]

Knowing that I can set multiple event listeners for the same element really helped my self-guided project! Thanks!

[Sjongleringsmannen]

I was looking for the explanation of the last parameter of addEventListener, the optional one. Thanks, I think I understand it now! And here's my attempt on trying to explain it with my words: The last parameter decides in which order two events are fired on an event. Innermost(false) or outermost(true) element first - with event bubbling.

[rhetoricity]

This was an extraordinary intro to your course. You really know your audience well, my friend.

[DONofCD]

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

[habtamusium]

I got it informative for my fainal exam w/c left 1 day only . many thanks!

[YayZ]

Only One topic
But Deep and complete explanation 😎

[aleshamccown]

Excellent! Just what I needed! Thanks!

[tungvuongtri]

Thank you, you guys really help me to enhance my knowledge

[ankitmehrotra]

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?

[navigator]

How to make this code work in a browser? I have the same issue as with the video before.

[SportyPompano]

Hey, Thanks so much for this, this video helped so much, I was trying to get the click to do something but I couldn't get it until I saw this video, now it's obvious, thanks.

[armennagapetian]

Great explanation thank you so much !!!

[NYC_CuriousG]

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

[amirbland]

It’s took me 10, 000 try’s but I got it to work

[gcambrose]

When I go to update console I receive this violation and I my console does not update, how can I stop this violation message? [Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. you for your consideration.

[msbecks]

Hello I need to pass a callback function that takes an argument. like, btn.addEventListener('click', myFunction(arg)); .... but i had some problems with this as the function ran without a click.... any help please

[americanocoffee]

Is there a reason why my code works in Codepen but not in VScode? VScode is working because I am using it on another project. Great videos!!!

[trenvert]

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?