I’m new to JavaScript and I kept hearing my teacher talk about event handler, event listener and I couldn’t decipher one from the other. This video is just what I needed. THANK YOU!
🎯 Key Takeaways for quick navigation: 00:00 *🎶 Introduction to Event Handling in JavaScript* - Understanding the difference between event handlers and event listeners in JavaScript. - Overview of handling events using event handlers and event listeners. 00:30 *🖱️ Event Handlers in JavaScript* - Event handlers are properties of objects used to handle events. - Demonstrating event handling with an example of using the `onclick` event handler. - Limitation of event handlers: only one event handler for a specific event type. 01:51 *🔊 Event Listeners in JavaScript* - Event listeners are assigned to objects to listen for events and execute code accordingly. - Example of using the `addEventListener` method to handle click events. - Advantage of event listeners: ability to add multiple listeners for the same event. 03:41 *🔃 Comparison: Event Handlers vs. Event Listeners* - Experimenting with adding multiple event handlers and event listeners to understand their behavior. - Demonstration of the difference in behavior when adding multiple handlers/listeners. - General advice: prefer event listeners over event handlers for flexibility and scalability. Made with HARPA AI
But you need to be careful if you are assigning those listeners dynamically....if you for example open dialog with that element again and you are assigning those listeners again, you will have all your listeners runned multiple times, so don't forget to remove listeners before taking your element away :)
Is there a preference of which to use if you need to have multiple objects all call the same function? For example I need to have several form fields concatenated into a single field. Also, is there anything special that needs to be done with addEventListener depending on the type of input field, such as radio button vs. text vs. select field?
The solution I used was to use the generally least preferred option, which is in-line HTML event handler where you can have multiple functions separated by semi-colons, such as onchange=“func1();func2()”.
I’m new to JavaScript and I kept hearing my teacher talk about event handler, event listener and I couldn’t decipher one from the other. This video is just what I needed. THANK YOU!
Short and straight to the point, learnt helpful tips
🎯 Key Takeaways for quick navigation:
00:00 *🎶 Introduction to Event Handling in JavaScript*
- Understanding the difference between event handlers and event listeners in JavaScript.
- Overview of handling events using event handlers and event listeners.
00:30 *🖱️ Event Handlers in JavaScript*
- Event handlers are properties of objects used to handle events.
- Demonstrating event handling with an example of using the `onclick` event handler.
- Limitation of event handlers: only one event handler for a specific event type.
01:51 *🔊 Event Listeners in JavaScript*
- Event listeners are assigned to objects to listen for events and execute code accordingly.
- Example of using the `addEventListener` method to handle click events.
- Advantage of event listeners: ability to add multiple listeners for the same event.
03:41 *🔃 Comparison: Event Handlers vs. Event Listeners*
- Experimenting with adding multiple event handlers and event listeners to understand their behavior.
- Demonstration of the difference in behavior when adding multiple handlers/listeners.
- General advice: prefer event listeners over event handlers for flexibility and scalability.
Made with HARPA AI
brilliant just what I was looking for, simple and straight to the point, boom!
Well explained with clear examples, appreciated!
Thanks. This was simple and easy to understand appreciate it bro
Really this video gave me a solution for my problem .... U are the best ... U solved it within few seconds .... In easy way..
This was a very useful video for me. I had previously wrapped button and such with divs to support two events at once. No more. Thank you.
Great Patrick, your explanations are easy to understand
Thank you for making this subject so easy to understand, I am so glad I persevered with my search and found you.
Thanks for explaining ❤
thank you for your video... God Bless You with The Best All Things
thank you ..this is the best explanation about difference between handler and listener. .I was confused about them very much. ....Subscribed 👍
Like
Thanks for the clear explication.
thanks buddy. you really solved my confusion about event handler and listener.
Now I understand. Thanks a lot.👍
Helpful content❤❤❤, I'm glad that you are doing something useful😊
Brilliant explanation. Thank you bro
Bro thank you for this video, perfect explanation
Great video! Solved my doubt of 2hrs research. Kudos!
But you need to be careful if you are assigning those listeners dynamically....if you for example open dialog with that element again and you are assigning those listeners again, you will have all your listeners runned multiple times, so don't forget to remove listeners before taking your element away :)
Great example.
thx. that was pretty easy to understand
Thank you. Very clear.
I'd like to add that using EventListener allows you to add additional options if it's needed, cuz Im not sure if handlers do the same staff
Thanks
Thanks. Its very clear now.
Great video, at work i hear these terms all the time but didn't get them initially
keep up the great work
mind asking what font is this??... Too cool
Nice job.
Thank you
Thank you!!
Super bro
nice
thank you
How do you click once & comment 3 different lines at the same time? I'm also just learning a lot of shortcuts in the IDE
Thanks for the awesome content, which theme are you using for your VSCODE bro
Is there a preference of which to use if you need to have multiple objects all call the same function? For example I need to have several form fields concatenated into a single field.
Also, is there anything special that needs to be done with addEventListener depending on the type of input field, such as radio button vs. text vs. select field?
The solution I used was to use the generally least preferred option, which is in-line HTML event handler where you can have multiple functions separated by semi-colons, such as onchange=“func1();func2()”.
can you please make video about difference between let,const and various and when to use them?
thank you very much
thanks
nice moustache btw
I love you
What if I use handler and listener at the same time?
why no one is appreciating his typing sound?
เทพจัดพี่
Impress why code typing
+
Thanks
Thank you