addEventListener() - Beau teaches JavaScript
Вставка
- Опубліковано 27 вер 2024
- 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/bea...
🔗 All DOM events: developer.mozi...
🐦 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.freecod...
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.
very nice!! i am still confused but i will keep on watching 20 more times.good job
watch 20 different videos instead.
A tip: you can watch movies on KaldroStream. Been using it for watching all kinds of movies during the lockdown.
@Frederick Ahmed Definitely, I've been using Kaldrostream for years myself :D
@Frederick Ahmed yup, I've been watching on KaldroStream for months myself =)
same hhhh
had a problem with eventlisteners for the past 2 days and the insight you gave on useCapture really helped fix the problem :)
This was an extraordinary intro to your course. You really know your audience well, my friend.
Knowing that I can set multiple event listeners for the same element really helped my self-guided project! Thanks!
Only One topic
But Deep and complete explanation 😎
Thank you, you guys really help me to enhance my knowledge
Thank you for this.
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?
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.
I don't think so, it's that useful! Pretty dumb video! Need improvement, btw!
@@agarsomyoutuber4608 maybe but it really did help, I couldnt get it at all
Great explanation thank you so much !!!
not great even not good but very bad explanation , i didnt understand nothing
@@realcconnect6873 It's actually good if you did not understand nothing. It would be bad if you hadn't understood ANYTHING :)
Excellent clearness
How to make this code work in a browser? I have the same issue as with the video before.
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.
I think you can use arrow function to look more cleaner
i love you beau !
beau is the best
very nice thank you Beau
what if I want to set a parameter to my function?
beast tutorial bro thanks a lot
Loved the video thanks
It’s took me 10,000 try’s but I got it to work
What about useCapture of p = true, and useCapture of p = false (or vice versa), what would be the result ???
Thank you for the explanation
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💀💀
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.
what font are you using????
Thanks
the audio quality can be improved. thx
nothing I understand
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!!!
Same here . Mine too doesn't work in VScode .
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.
This is why I came here))
Still Confused but explained well
Thanks bro : )
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:
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?
If you send me your code I may be able to offer a suggestion. beau@freecodecamp.org
Why do we need to remove eventListener? when we do not clear normal click functions?
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.
vijays code you can do .setAttribute("disabled") = true;
Can’t even see anything.
👍👍
but you could build a function to call many times you want the onclick event!!
Neste vídeo temos um exemplo de um projeto carrinho de compras que utiliza o addEventListener ua-cam.com/video/IBAsDQf-rrw/v-deo.html
Maybe next time you can try explaining things in english!
It’s not the best… missing some explanation… It’s only good if u already know that (for refreshing) 😢
☑️☑️
Thank you
Hmmmm
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]}?
no lorem ipsum?!?!am i în heaven?
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.
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
Excellent! Just what I needed! Thanks!
TOP
is this Hashinshin
i learned smthing new
nothing good
Real C Connect true, I forgot it all
hehe myP