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

In today's video I'll be taking you through the basics of JavaScript events and how you can use them to make your websites or apps more interactive. Events are a core JavaScript feature that all web developers should be comfortable with.

We'll cover four main topics: inline event handlers, the "addEventListener" function, event objects and lastly, the difference between standard and arrow functions when it comes to events.

0:00 What are Events?
1:48 Inline Event Handlers
5:02 addEventListener Function
8:37 Event Objects
12:27 Standard vs. Arrow Functions

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript

[dcode-software]

*RELATED VIDEO: 5 POWERFUL JAVASCRIPT EVENTS*

🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇

[lastspoil]

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

[shariafarooqui]

Please continue this JavaScript series, really helpful!

[beinyourguard]

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

[thisisnotjoshiswear]

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)

[codingSparrow]

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

[chickenpotthighs]

Hi dcode. Thank you for sharing your knowledge and clarifying about the event object !! Helps me a lot!

[alistairtrotter]

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

[parthasarathimoharana]

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

[this_is_joydip]

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

[photoinshot]

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.

[peterwafula]

Thank you so much for explaining so well.

[sejalsankhe]

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

[Marjolein_]

I found the explanation of event object really useful.

[jedt]

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

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

[smitty]

Thank you for helping me understand this.

[adriansweg]

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

[lyza]

Thank you. It's was helpful for me😊

[MuhammadAdnan.]

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