addEventListener() - Beau teaches JavaScript

Подписаться 10 млн

Просмотров 144 тыс.

50% 1

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

Опубликовано:

23 апр 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 78

@CknSalad 5 лет назад

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 5 лет назад

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

@qureshiowais6951 4 года назад

watch 20 different videos instead.

@frederickahmed8634 3 года назад

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

@landynlondon7474 3 года назад

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

@shilohjuelz2478 3 года назад

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

@rosalyna_24 2 года назад

same hhhh

@Sjongleringsmannen 4 года назад

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.

@DONofC0D 6 лет назад

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

@SoCalRhetor 2 года назад

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!

@NYC_CuriousG 6 лет назад

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

@aleshamccown2095 2 года назад

Excellent! Just what I needed! Thanks!

@tung01vuongtri33 Год назад

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

@ankitmehrotra8519 7 лет назад

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?

@navigator54674 5 лет назад

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

@YayZ Год назад

Only One topic But Deep and complete explanation 😎

@armennagapetian7779 5 лет назад

Great explanation thank you so much !!!

@realcconnect6873 3 года назад

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

@onlygodcanjudgeme4433 2 года назад

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

@Lerremy 5 лет назад

beast tutorial bro thanks a lot

@gamolocovideos6906 5 лет назад

Loved the video thanks

@Onlineteaching10 3 года назад

Excellent clearness

@msbecks3806 3 года назад

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

@SportyPompano 4 года назад

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 4 года назад

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

@SportyPompano 4 года назад

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

@gcambrose2422 2 года назад

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.

@arthurnino93 3 года назад

very nice thank you Beau

@zettabytesofknowledge8235 4 года назад

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.

@americanocoffee541 5 лет назад

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 4 года назад

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

@EnzoAuditore Год назад

Thank you for this.

@trenvert123 6 лет назад

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 6 лет назад

If you send me your code I may be able to offer a suggestion. beau@freecodecamp.org

@vijayscode5093 7 лет назад

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

@BeauCarnes 7 лет назад

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 7 лет назад

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

@davidecasella_ 3 года назад

what font are you using????

@adityabhatnagar3264 5 лет назад

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:

@yanatasroekpornpipat734 Год назад

I think you can use arrow function to look more cleaner

@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 9 месяцев назад

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

@danielraducu9073 2 года назад

i love you beau !

@zeynel_premium_edition 3 года назад

Thanks bro : )

@kevinfelipe1811 Год назад

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

@fragrantbloom 2 года назад

Thank you

@MarstonH 3 месяца назад

beau is the best

@abhisheklale1429 3 года назад

Still Confused but explained well

@calibr0636 4 года назад

i learned smthing new

@realcconnect6873 3 года назад

nothing good

@calibr0636 3 года назад

Real C Connect true, I forgot it all

@amirbland7836 2 года назад

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

@user-or7ji5hv8y 4 года назад

the audio quality can be improved. thx

@mortezafarhangpanah256 Год назад

Thanks

@drewdrew1468 4 года назад

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

@VGLV888 4 года назад

☑️☑️

@Udaridamarakula1234 4 года назад

👍👍

@brandoncarlosfloresmarzo7862 4 года назад

TOP

@ahsath 6 лет назад

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

@kempenstein8341 4 года назад

is this Hashinshin

@realcconnect6873 3 года назад

nothing I understand

@umestudantedeti9072 3 года назад

Neste vídeo temos um exemplo de um projeto carrinho de compras que utiliza o addEventListener ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IBAsDQf-rrw.html