Great video as ever thanks! Always well explained and very informative. Have you got a video on how to fire a functions on different events for example if I wanted to fire off a function on either , click, keyup or keydown with only one event listener rather than three? Thanks again.
Thank you soo much for this video, it helped me a lot to understand that (e) heheh. i always used to be confused but now no more confusion. thanks a lot once again. 😄
I must admit that I repeated the video several times when dcode pronounce "MouseEvent" 10:36 and says "Notice how it says mouse events" must be the coolest thing I heard this week :) Finally a great explanation about the event objects, the "e" or "ev" or "event" always got me confused. Now I am completely enlightened. My question is that isn't the "this" keyword supposed to act like a method under the object and refer to the object or act like a standard function and refer to the window or global. Really didn't get how it referred "boxDiv". Also, the difference of standard and arrow functions when used with "this" keyword. I was thinking both types of functions are supposed to be acting equal 100%. Probably I need to dig more.
FWIW, was looking for multi-processing aspects of event handling. Mulitple event handlers, adding and deleting themselves from the event notification list, how is reentrancy handled, multiple event handlers, what if added twice, etc.
Ok. talking about 'e' at 8:17. But why when you define your own event handler function you are obliged to specify a function argument there for passing the event into the function (Because MDN says its required, you can not reference event straight from the handler functions, for example, if you want to stopPropagation of the event, it gives error). While, when passing the handler function as argument in addEventListener , you can not pass an argument to the handler function, it gives an error at run time - i.e. you pass a handler function without passing any function argument to it "handleBoxClick" without "()" or "(e)"? I am a beginner, I do not understand it... the function must be defined with an argument, but when invoking the function no argument parameter passed to the function.... It feels weird and wrong... I do not know.
Ok ChatGPT explained it to me clearly... "The reason you specify an argument parameter (in this case, event) in the definition of the event handler function but don't pass any arguments when calling it is due to how event listeners work in JavaScript. Event listeners are a mechanism provided by the browser's DOM (Document Object Model) API. When you attach an event listener to an element and specify a function as the handler, the browser itself will call that function when the event occurs, and it will automatically pass an event object as an argument to the function. So, when you define an event handler function, you're telling the browser, "When a 'click' event occurs on this element (box), call the handleBoxClick function and pass the event object automatically." The browser takes care of passing the event object, and you can access it within the handleBoxClick function as if you had passed it explicitly. This is part of how the DOM event handling system is designed to work in JavaScript, making it convenient for developers to work with events without manually passing event objects each time."
Can you do a list of vids about Functions (all types inc. Anonymous, Self-invoking etc), Callbacks, Asynchronous JS, Promises, Async/Await and AJAX? Maybe one day.
@@dcode-software I need to go through your list more. I already saw the XML Http request series which is amazing. To round it off we just need some vids on how to make an AJAX chatroom.
And I only found a particular even like yesterday, after searching for like billions of years of trying to code javascript. And it was only by luck as it would happen
*RELATED VIDEO: 5 POWERFUL JAVASCRIPT EVENTS*
czcams.com/video/Vu60OLyLa-w/video.html
🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
Please continue this JavaScript series, really helpful!
Awesome thank you! Will do 🙂
This teacher give you real world examples from the start of the video! Thank you.
You deserve more views! I learn a lot watching your videos
Appreciate that, thanks!
I totally agree. Your teaching makes sense! Thanks a lot!
If anyone is curious, to access the boxDiv DOM Object using the arrow function, you can get it from the event object target property (e.target)
Great introduction video to events! really appreciate the effort you put into this!
Exactly what I needed! Thanks!
Hi dcode. Thank you for sharing your knowledge and clarifying about the event object !! Helps me a lot!
wow! very detailed and easy explanation. Thanks!! 💜💜
Indeed you are the best JS tutor Brother...Kudos
Cheers mate!
@@dcode-software I request you to make a playlist on React. If you have time for that.
Thank you so much! Make more on Events of js please ❤❤
Thank you so much for explaining so well.
I found the explanation of event object really useful.
Great video as ever thanks! Always well explained and very informative. Have you got a video on how to fire a functions on different events for example if I wanted to fire off a function on either , click, keyup or keydown with only one event listener rather than three? Thanks again.
Thank you for helping me understand this.
Thank you soo much for this video, it helped me a lot to understand that (e) heheh. i always used to be confused but now no more confusion. thanks a lot once again. 😄
thx very helpful video! made it easy to understand what the 'e' or event object is since i was seeing it a lot when learning javascript :D
That was the main motivation behind this video! Thanks for watching
I must admit that I repeated the video several times when dcode pronounce "MouseEvent" 10:36 and says "Notice how it says mouse events" must be the coolest thing I heard this week :)
Finally a great explanation about the event objects, the "e" or "ev" or "event" always got me confused. Now I am completely enlightened. My question is that isn't the "this" keyword supposed to act like a method under the object and refer to the object or act like a standard function and refer to the window or global. Really didn't get how it referred "boxDiv". Also, the difference of standard and arrow functions when used with "this" keyword. I was thinking both types of functions are supposed to be acting equal 100%. Probably I need to dig more.
Hey thanks! I got a video on "this" in JavaScript I suggest you check it out
@@dcode-software Thanks Dom already jumped into "this"!
Very useful, thanks! 🙏🏼
🙂 you're welcome
Thank you! I needed this
Glad it was helpful!
'Like' instantly without even watching a video
Love it, thanks mate!
Very interesting topic, thank you.
Sir come with an E-commerce shop with features filters , product details page , sorting products etc. Using only JS and firebase. ?
Gracias por el video! A veces se necesita que alguien lo explique de una manera diferente para entender los conceptos
Thank you. It's was helpful for me😊
Great video, thank you
Thanks so much
FWIW, was looking for multi-processing aspects of event handling. Mulitple event handlers, adding and deleting themselves from the event notification list, how is reentrancy handled, multiple event handlers, what if added twice, etc.
This is GOLD!!! ❤❤
You're welcome!
Excelente curso men!!
Can anyone help me explain why my addEventListener is not working. Am using sublime text editor
Great tutorial, thank you
Glad it was helpful!
it was awesome video 💫
Thanks!
You're welcome 😊 thank you for your donation!
thank you for this.
Thanks
I seem to get PointerEvent instead of the MouseEvent.
thank you :)
Ok. talking about 'e' at 8:17. But why when you define your own event handler function you are obliged to specify a function argument there for passing the event into the function (Because MDN says its required, you can not reference event straight from the handler functions, for example, if you want to stopPropagation of the event, it gives error). While, when passing the handler function as argument in addEventListener , you can not pass an argument to the handler function, it gives an error at run time - i.e. you pass a handler function without passing any function argument to it "handleBoxClick" without "()" or "(e)"? I am a beginner, I do not understand it... the function must be defined with an argument, but when invoking the function no argument parameter passed to the function.... It feels weird and wrong... I do not know.
Ok ChatGPT explained it to me clearly...
"The reason you specify an argument parameter (in this case, event) in the definition of the event handler function but don't pass any arguments when calling it is due to how event listeners work in JavaScript.
Event listeners are a mechanism provided by the browser's DOM (Document Object Model) API. When you attach an event listener to an element and specify a function as the handler, the browser itself will call that function when the event occurs, and it will automatically pass an event object as an argument to the function.
So, when you define an event handler function, you're telling the browser, "When a 'click' event occurs on this element (box), call the handleBoxClick function and pass the event object automatically."
The browser takes care of passing the event object, and you can access it within the handleBoxClick function as if you had passed it explicitly. This is part of how the DOM event handling system is designed to work in JavaScript, making it convenient for developers to work with events without manually passing event objects each time."
What VS code theme is that?
How to call multiple functions parallely when multiple buttons invoking their respective functions are pressed together??
Thanks alot
Can you do a list of vids about Functions (all types inc. Anonymous, Self-invoking etc), Callbacks, Asynchronous JS, Promises, Async/Await and AJAX? Maybe one day.
I've got a few videos on those topics, particularly promises and the async/await syntax.
@@dcode-software I need to go through your list more. I already saw the XML Http request series which is amazing. To round it off we just need some vids on how to make an AJAX chatroom.
Thank you so much!!!!
Thank you!
Thank you very much 😃😍 !!!!!
nice one
Amazing!
Who needs this while chat gpt can solve everything
Saludos desde argentina 😎👍🇦🇷🇦🇷🇦🇷
please make a video on client-side form validation
Sounds like a good idea, thanks!
Brilliant
Which vs code color extension did you use?
It's called 'dcode'
@@pablozuta2402 Thanks bruh! it looks lit 🔥
Nice Video
Cheers mate!
0:29 I see what you did there.
Wow awesome
hey sir can you help me with a session on js I am working on creating a calculator
pls next time use dark mode !!!
😂
Why aren’t using external js file you making beginners confuse
Title "Complete overview" - "all you need to know"
Thumb "Basics"
Video "absolute less than basics"
And I only found a particular even like yesterday, after searching for like billions of years of trying to code javascript. And it was only by luck as it would happen
Which event was it?
@@dcode-software addEventListner('load', ...), unbelievable I know
Oh cool, you should also look at the Document DOMContentLoaded event, it may interest you
@@dcode-software I found the list also yesterday, thanks your tutorials are good dude
Awesome 😍💋 💝💖♥️❤️
Que onda bebeta?
js is very messy, a lot of functions written in many ways
Thanks
Thanks
Thanks