A Complete Overview of JavaScript Events - All You Need To Know

[@dcode-software]

*RELATED VIDEO: 5 POWERFUL JAVASCRIPT EVENTS* kzbin.info/www/bejne/jKaZYYKCrrGUY9k 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

[@lastspoil5547]

This teacher give you real world examples from the start of the video! Thank you.

[@shariafarooqui5748]

Please continue this JavaScript series, really helpful!

[@dcode-software]

Awesome thank you! Will do 🙂

[@beinyourguard]

You deserve more views! I learn a lot watching your videos

[@dcode-software]

Appreciate that, thanks!

[@steliosalexandrakis78]

I totally agree. Your teaching makes sense! Thanks a lot!

[@mon0theist_tv]

Thank you, I was confused on the function(e) thing on another course, this helped 👍

[@alistairtrotter3461]

Great introduction video to events! really appreciate the effort you put into this!

[@parthasarathimoharana5282]

Indeed you are the best JS tutor Brother...Kudos

[@dcode-software]

Cheers mate!

[@parthasarathimoharana5282]

@@dcode-software I request you to make a playlist on React. If you have time for that.

[@yevgeniyaterlyuk5248]

Exactly what I needed! Thanks!

[@house_sparrow1]

wow! very detailed and easy explanation. Thanks!! 💜💜

[@GaetanoBarreca]

Thanks!

[@dcode-software]

You're welcome 😊 thank you for your donation!

[@sejalsankhe3786]

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. 😄

[@this_is_joydip]

Thank you so much! Make more on Events of js please ❤❤

[@Marjolein_1979]

I found the explanation of event object really useful.

[@thisisnotjoshiswear828]

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)

[@peterwafula3923]

Thank you so much for explaining so well.

[@jedt1]

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

[@dcode-software]

That was the main motivation behind this video! Thanks for watching

[@photoinshot1355]

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.

[@smitty1753]

Thank you for helping me understand this.

[@newentu]

Excelente curso men!!

[@srinivasaraoyp3640]

Very interesting topic, thank you.

[@shanilka_wariyapperuma]

This is GOLD!!! ❤❤

[@dcode-software]

You're welcome!

[@lyza2526]

Thank you. It's was helpful for me😊

[@muhendis_]

it was awesome video 💫

[@Kaiseyo]

Thank you! I needed this

[@dcode-software]

Glad it was helpful!

[@BossPetta]

Very useful, thanks! 🙏🏼

[@dcode-software]

🙂 you're welcome

[@charlestoneoyoo]

Great video, thank you

[@MuhammadAdnan2.0]

Sir come with an E-commerce shop with features filters , product details page , sorting products etc. Using only JS and firebase. ?

[@mcrmehmet]

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.

[@dcode-software]

Hey thanks! I got a video on "this" in JavaScript I suggest you check it out

[@mcrmehmet]

@@dcode-software Thanks Dom already jumped into "this"!

[@frednicholson]

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.

[@nkhanhle8968]

Thank you so much!!!!

[@EnzoAuditore]

thank you for this.

[@BlackFlux22]

Great tutorial, thank you

[@dcode-software]

Glad it was helpful!

[@haleynaga5671]

Amazing!

[@rostyslav5334]

'Like' instantly without even watching a video

[@dcode-software]

Love it, thanks mate!

[@adriansweg8092]

Gracias por el video! A veces se necesita que alguien lo explique de una manera diferente para entender los conceptos

[@muneeburrehman4690]

Thank you!

[@CHRIST.REIGNS]

Thanks so much

[@curlyt8198]

Thank you very much 😃😍 !!!!!

[@bhagyashreekhairnar683]

thank you :)

[@andreisavitski6145]

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.

[@andreisavitski6145]

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."

[@noxius7332]

Saludos desde argentina 😎👍🇦🇷🇦🇷🇦🇷

[@balenmohammed1657]

Brilliant

[@vesemechristiana5265]

Thanks alot

[@oceanview3165]

Which vs code color extension did you use?

[@pablozuta2402]

It's called 'dcode'

[@oceanview3165]

@@pablozuta2402 Thanks bruh! it looks lit 🔥

[@onee]

I seem to get PointerEvent instead of the MouseEvent.

[@Martin958]

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've got a few videos on those topics, particularly promises and the async/await syntax.

[@Martin958]

@@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.

[@akshadrathod9203]

nice one

[@capslock3250]

Thanks

[@GoatCS]

What VS code theme is that?

[@esnapeye7098]

How to call multiple functions parallely when multiple buttons invoking their respective functions are pressed together??

[@justtestingmycurrentskills747]

Nice Video

[@dcode-software]

Cheers mate!

[@vesemechristiana5265]

Can anyone help me explain why my addEventListener is not working. Am using sublime text editor

[@muhammadans2193]

please make a video on client-side form validation

[@dcode-software]

Sounds like a good idea, thanks!

[@ajithkumarv603]

Wow awesome

[@alvarobusquets]

Who needs this while chat gpt can solve everything

[@folatech4404]

hey sir can you help me with a session on js I am working on creating a calculator

[@sdaiwepm]

0:29 I see what you did there.

[@logaimat5362]

pls next time use dark mode !!!

[@Spunky_Tx]

😂

[@chisomedoka5651]

Anyone here in 2024?

[@Dexter101x]

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

[@dcode-software]

Which event was it?

[@Dexter101x]

@@dcode-software addEventListner('load', ...), unbelievable I know

[@dcode-software]

Oh cool, you should also look at the Document DOMContentLoaded event, it may interest you

[@Dexter101x]

@@dcode-software I found the list also yesterday, thanks your tutorials are good dude

[@farhadcohan8867]

Why aren’t using external js file you making beginners confuse

[@elvisreuben5002]

Awesome 😍💋 💝💖♥️❤️

[@noxius7332]

Que onda bebeta?

[@brian9790]

Title "Complete overview" - "all you need to know" Thumb "Basics" Video "absolute less than basics"

[@GRHmedia]

Far from all you need to know.

[@zbysiu100]

js is very messy, a lot of functions written in many ways

[@mortezafarhangpanah256]

Thanks

[@AbdelillahELATTARI]

What VS code theme is that?

[@tomek_kot]

Thank you 💪

[@نون-و5ب]

Thanks

[@tamilmemerguy3200]

Thanks