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.
💻 Code: codepen.io/beaucarnes/pen/JNR...
🔗 All DOM events: developer.mozilla.org/en-US/d...
🐦 Beau Carnes on Twitter: / carnesbeau
⭐JavaScript Tutorials Playlists⭐
▶JavaScript Basics: • JavaScript Basics Course
▶Data Structures and Algorithms: • Data Structures and Al...
▶Design Patterns: • Design Patterns - Beau...
▶ES6: • ES6 - Beau teaches Jav...
▶Clean Code: • Clean Code - Beau teac...
-
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 freecodecamp.com
Read great tech articles at medium.freecodecamp.com

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

[@paudelamarianaoancea3761]

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

[@qureshiowais6951]

watch 20 different videos instead.

[@frederickahmed8634]

A tip: you can watch movies on KaldroStream. Been using it for watching all kinds of movies during the lockdown.

[@landynlondon7474]

@Frederick Ahmed Definitely, I've been using Kaldrostream for years myself :D

[@shilohjuelz2478]

@Frederick Ahmed yup, I've been watching on KaldroStream for months myself =)

[@rosalyna_24]

same hhhh

[@DONofC0D]

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

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

[@SoCalRhetor]

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

[@kingj282]

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

[@aleshamccown2095]

Excellent! Just what I needed! Thanks!

[@tung01vuongtri33]

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

[@Lerremy]

beast tutorial bro thanks a lot

[@ankitmehrotra8519]

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?

[@Onlineteaching10]

Excellent clearness

[@gamolocovideos6906]

Loved the video thanks

[@armennagapetian7779]

Great explanation thank you so much !!!

[@realcconnect6873]

not great even not good but very bad explanation , i didnt understand nothing

[@onlygodcanjudgeme4433]

@@realcconnect6873 It's actually good if you did not understand nothing. It would be bad if you hadn't understood ANYTHING :)

[@EnzoAuditore]

Thank you for this.

[@YayZ]

Only One topic But Deep and complete explanation 😎

[@arthurnino93]

very nice thank you Beau

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

[@navigator54674]

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.

[@agarsomyoutuber4608]

I don't think so, it's that useful! Pretty dumb video! Need improvement, btw!

[@SportyPompano]

@@agarsomyoutuber4608 maybe but it really did help, I couldnt get it at all

[@danielraducu9073]

i love you beau !

[@MarstonH]

beau is the best

[@msbecks3806]

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

[@zeynel_premium_edition]

Thanks bro : )

[@fragrantbloom]

Thank you

[@davidecasella_]

what font are you using????

[@gcambrose2422]

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 event. Consider marking event handler as 'passive' to make the page more responsive. ..............Thank you for your consideration.

[@trenvert123]

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?

[@BeauCarnes]

If you send me your code I may be able to offer a suggestion. [e-mail]

[@americanocoffee541]

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

[@bhushangawali81]

Same here . Mine too doesn't work in VScode .

[@zettabytesofknowledge8235]

oh that code link is very cool! I am trying to add a event listener to a reset button displaying the text the form has been submitted.

[@yanatasroekpornpipat734]

I think you can use arrow function to look more cleaner

[@vijayscode5093]

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

[@BeauCarnes]

There is no requirement to remove an eventListener. You only do it if that will help the purposes of your program. Maybe you want to deactivate a button until a validation is passed.

[@nazarmaksymchuk2021]

vijays code you can do .setAttribute("disabled") = true;

[@kevinfelipe1811]

what if I want to set a parameter to my function?

[@mortezafarhangpanah256]

Thanks

[@mohamedhamza2801]

What about useCapture of p = true, and useCapture of p = false (or vice versa), what would be the result ??? Thank you for the explanation

[@angerbadge773]

create a pen and try it yourself thats how you learn you wont get all the answers from youtube itself, get ur ass working in case if u are still waiting for the reply💀💀

[@adityabhatnagar3264]

am trying to make social share buttons, but when I do right click or mouse middle click. JS onClick not executing. can you help? TIA A piece of code example:

[@calibr0636]

i learned smthing new

[@realcconnect6873]

nothing good

[@calibr0636]

Real C Connect true, I forgot it all

[@amirbland7836]

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

[@abhisheklale1429]

Still Confused but explained well

[@VGLV888]

☑️☑️

[@user-or7ji5hv8y]

the audio quality can be improved. thx

[@Udaridamarakula1234]

👍👍

[@ahsath]

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

[@brandoncarlosfloresmarzo7862]

TOP

[@drewdrew1468]

This is only a basic explanation. You didn't cover passing parameters in the nested function that's located within the parameter of addEventListener. addEventListener(event, function(e) { //code here}, useCapture); I'm sure many people would be curious about where the arugment for the e parameter comes from.

[@grinishkin]

This is why I came here))

[@umestudantedeti9072]

Neste vídeo temos um exemplo de um projeto carrinho de compras que utiliza o addEventListener kzbin.info/www/bejne/f3OkpHeHm5KlqNk

[@realcconnect6873]

nothing I understand

[@kempenstein8341]

is this Hashinshin

[@JashandeepSingh-be2tl]

hehe myP

[@user-ds3vn7dz7m]

no lorem ipsum?!?!am i în heaven?

[@tonyamichelle9310]

Hmmmm

[@emmanuelekwere9198]

Can’t even see anything.

[@ParaZumir]

It’s not the best… missing some explanation… It’s only good if u already know that (for refreshing) 😢

[@DharmRakshak2]

Maybe next time you can try explaining things in english!