35: What Are Event Listeners In JavaScript | JavaScript Events | JavaScript Tutorial | mmtuts
HTML-код
- Опубликовано: 1 окт 2024
- In this JavaScript tutorial you will learn how to run multiple functions when a JavaScript event happens. I will show how to do this using two different methods, where one includes using JavaScript event listeners.
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Material for this lesson: / lesson-material-42361704
You really did a great job on analyzing peoples learning problems and disected the approach to learning JS in a way which makes it palpable to a broad mass. You should think about writing a JS course book.
I understand HTML , CSS , PHP , SQL , PYTHON but for the life of me not a single video I have watched on JAVASCRIPT makes any sense to me ( I have watched hours and days and weeks worth of video in JS ). I guess its the way everyone teaches it since it seems they all teach it the same way. Smart People who know how to use JS but are not teachers at all and then say JUST KEEP WATCHING IT WILL MAKE SENSE which is like a Kid from the BRONX trying to READ Original SHAKESPEARE Written in UKRAINIAN and telling him JUST KEEP READING IT WILL ALL MAKE SENSE.
You taught me in 14 minutes what my school has been trying to teach me all week. Thank you. :)
youre gonna like "jake the muslim metaphysician on YT
I just started watching your HTML/CSS tutorial and its been great thank you so much for providing this free content.Also u look like elon musk haha
Thank you very much for making my boring javaScript in to exciting....! wating to here from you more..!
*You are our modern day's **_Richard Feynman._** You are great like him.*
React dev here... have an interview tomorrow and just blasted through this entire playlist bc the interview will be "only on css and js" and I realized I'm pretty useless without react. Can't believe how many fundamentals I have been missing these past 2 years. Thanks a TON!
Keep it Up bro😍
Please make a tutorial on recursion in javascript with many examples and explanation please thanks ..
Brother you are just awesome.You know perfectly what the word teaching mean.I just love learning the courses from your tutorials . Love your way of making us understand.
This was so F*CKIN awesome! Thanks for this tut, would you be able to include an explanation for using target as well, maybe in the next episode?
I wonder why all tutorial dosent show how to fix looping listeners :/
Example;
test.button.addEventListener('click',function(e){
test.count++;
console.log(test.count);
})
This will work fine if you write it first time, everytime you press that button you will get +1 each time.
BUT!
If you update that function you will then add "new" function plus that one you just created,
that's mean you will now get +1 +1 = +2 for each time now...
I did just for fun editing my function 50 times, now it will add +52 each time when i press that button :O
On dev tools I can see there is 52 different script code that start with "VM" and then some random number, plus :line code
Can someone give some advice to prevent this happened?
onclick function works so much better, its just addEventListener() that doesn't work
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.
Hi, you make it easy to grasp these logic flow concepts.
Quick question:
1. Why do you say it's messy to call two functions in another one when the actuall working functions are already envoked?
I just wanted to say thank you mmtuts, I have just started in web development and currently trying to grasp js. Your videos are great and have been a very helpful resource for me.
Nice video Elon musk.host meme review pls
thanks man, ive been really looking for a video that teaches you about addeventListeners().
Thanks for taking your time to explain this. A lot of guys here speak too fast and it is hard to follow. Will watch your vids from now on....
great job Daniel
Thank you!! I couldn´t find anywhere how to pass parameters in an event function!!
Why there's no ( ) after btn.onclick = changeBtnText?
The concept of passing parameters is simple until its complicated. Thanks for the well explained breakdown
So true. My head was so confused for days for that (e)
Right now i understand a little bit more but at the same time still confusing.
Plz make a vid on calling async function using Event Listeners 🙏🙏
you explain it so well after watching, I came to your profile to buy your JS course you need to create one .
Hi. Your tutorials are very interesting. I really love them. Could you do tutorials about wordpress plugin development beginner to advanced?
Great as always
Nice to see you again :)
Can you do NodeJS course? More specifically NodeJS Object Oriented Programming course. I switched from PHP after 8 years of developing to NodeJS/ExpressJS. And it's hard to find ways on the internet to build OOP apps. But OOP is very important for me, I hate procedural development at all.
I have started learning events. I tried onload attribute on and onload property on document.body. Both works fine. Now I started using another alternative, using eventlister as below:
document.body.addEventListener("load", function (){alert("load body");});
But It's not working. Please help
Absolutely brilliant lesson as always. I wonder if you could help me with something. I'm trying to use eventListeners within es6 classes using canvas but for some reason after I assign this.ctx = canvas.getContext("2d"); and then later try to use the ctx variable in my display method within the class. The ctx variable is undefined. Any idea why this is?
great tutorials as always..iv'e actually finished all your web tutorials from (html-css,php,sql and javascript)...i'm going to start for jquery tomorrow..
please make another series but for Node.js.
thank you very much, iv'e learned a LOT in your videos.. hope you have a wonderful year.
Why did you passed only the "e" and not the name parameter ("Daniel") to the anonymous function? And it did work as it supposed to. Can someone explain?
The "e" refers to the event that is happening, and allow for us to use the event inside the function. It is a habit of programmers to write "e".
I just experienced an AHA moment, thanks
I really like watching your videos
If i wanted to create a function that alerts the user using their name that their message has been received, which one will it be?
e.g "Thank Bernard. We have received your message."
Very well explained and yes, lots of information but very clear and easy to understand because you're explaining each part and sequence. Thanks heaps and please keep making tutorials on website creation and design, and any programming software that's actually used in the real world out there. Thumbs up! Whoever did that 6 dislikes probably have JS videos on YT that are not gaining popularity! :)
Can you do more videos using OOP? I am building a project at the moment, and the only way I managed to get my objects' methods to run according to their events, was by placing them into new functions. I then ran the functions using event listeners and handlers, but I feel there has to be a better way using OOP to do that. Also all your videos on PHP and JavaScript are awesome
In HTML this is possible: onclick="doSomething();doSomethingElse();"
Thank you! I have found what i should've understand a long time ago, the necessity of anonymous function in eventhandler and probably could applied on other things too.
That was so great sir. You literally explained everything I have been having challenges concerning Events. Thanks a lot!
Thanks Sir! your teaching method is so good... i humble request you to make more advanced videos on JavaScript.....
can you make a tutorial on how u use adobe xd to design a site and later implement of a website i have been searching all over youtube and i cant really find one
What would you use and how to make a filter on a website. Example, to show only black pens if that is selected. idk how to explain it well
Sir please upload video on clouser in detaile by some example in javascript ...thanks
I've been through all your video on this javascript series and it was amazing i learned it thank you soo much
I hope you don't mind I shared your JavaScript videos with a handful of my friends on discord.
At about 8'10" you said 'delete the first function' rather than the second which is what you meant
Thank you very much! As you said, there's so much information in this episode, and in my opinion the last 2 minutes look very compressed, I hope you can do a longer version of this episode (like your project lessons) so that we can learn more about eventListener, again, thank you! Very good job!
Is it possible to use Javascript to delete a certain URL from the history?
Perfect just what I needed.
How can I make a div always active, also reactivate it after a click somewhere else? Right now I loop trough every 500ms to reactivate it witch isn't nice to browsers.
I have a jw player (heavily modified using your tutorials😎) , and for the event listeners (like play or volume) to work it needs to be in an active state.
Gode videoer. Jeg var faldet lidt bagud i skolen med undervisningen, dog bevæger jeg mig på rette spor igen ved hjælp af dine videoer
I am sure that to a JS pro all this makes sense.
Great, thank you so much..
am really need help with how to get select option queried into database..thanks
Thanks!!! This saved my hide. I've been learning for the past few years and I've been making a lot of progress lately, and, I think you pushed me over the top :).
Thank you new knowledge about eventlistener big help :)
Keep up the great work man! There are not many people teaching this topics that approach common learning problems like you do!!
How do you teach so perfectly? Making everything crystal clear! Thanks so much again. Please Keep making more videos of JS.You are a great teacher!!
you freeking awesome mate
where is the third parameter ?
#Powerlecture thanks man
will there be any more videos on javascript??
why does this guy look like the drugs dealer from obx xD
thank you great guy. God bless you for doing these videos for free.
hey please make a series on service workers. Please it's a request.
Thank you❤
Thanks
Awesome
great !
Such a clear explanation, thank you!
merci excellent course
Thank you for such a nice explaination.
so isnt there anymore episode coming
Great job brother... always the best
is it the last episode of this course ??
What program do you use for html
is it possible to code a group chat onto my website? I've been searching for this but have only found 2 person messaging only. Everywhere else that I look says that you have to embed third party software that wont integrate with mysql database so it would make my users have to login twice onto my website if they wanted to chat. why is it so difficult to find a video for this?....crazy and frustrating!
Try to check for websockets!
ill look into it, thanks!@@groovysalmon6857
Thanks for the great tutorial man.
nicely explained!
Your are fantastic ❤
Great tutorial!
Thank you!
So greate bro
Thumbnails are weird
Get used to them ;)
God video 😅
Mange tak Tim :)
Thank You
Thank you for respond Denial. you made a video in this series named banner rotater. in that video there was a problem on previous button. i try to solve that problem but i could not fix that. pleas us the solution. pleas pleas. pleas. i will ask for that until the solution is not provided :)
Try to fix your website
Excuse me?
Do you remember your "rotating banner" video??? If you do, the pictures required for the lesson cannot be viewed.
Not only that but basically when I try to enter your website I find it as ERROR 404