A Complete Overview of JavaScript Events

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

Рет қаралды 98,310

Күн бұрын

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:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
www.w3schools.com/js/js_event...
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

Пікірлер: 92

@dcode-software Жыл бұрын

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

@alistairtrotter3461 2 жыл бұрын

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

@chickenpotthighs9387 2 жыл бұрын

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

@shariafarooqui5748 3 жыл бұрын

Please continue this JavaScript series, really helpful!

@dcode-software 3 жыл бұрын

Awesome thank you! Will do 🙂

@lastspoil5547 8 ай бұрын

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

@yevgeniyaterlyuk5248 2 жыл бұрын

Exactly what I needed! Thanks!

@codingSparrow143 Ай бұрын

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

@peterwafula3923 Жыл бұрын

Thank you so much for explaining so well.

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

@this_is_joydip Ай бұрын

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

@beinyourguard 3 жыл бұрын

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

@dcode-software 3 жыл бұрын

Appreciate that, thanks!

@steliosalexandrakis78 3 жыл бұрын

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

@thisisnotjoshiswear828 2 жыл бұрын

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)

@sejalsankhe3786 7 ай бұрын

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

@smitty1753 Жыл бұрын

Thank you for helping me understand this.

@Marjolein_1979 Жыл бұрын

I found the explanation of event object really useful.

@jedt1 2 жыл бұрын

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 2 жыл бұрын

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

@lyza2526 Жыл бұрын

Thank you. It's was helpful for me😊

@Siddhakumbhar12 2 ай бұрын

Ur teaching really nice ☺️ I really proud of you .❤

@srinivasaraoyp3640 9 ай бұрын

Very interesting topic, thank you.

@adriansweg8092 2 жыл бұрын

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

@BossPetta 2 жыл бұрын

Very useful, thanks! 🙏🏼

@dcode-software 2 жыл бұрын

🙂 you're welcome

@charlestoneoyoo 7 ай бұрын

Great video, thank you

@Kaiseyo 2 жыл бұрын

Thank you! I needed this

@dcode-software 2 жыл бұрын

Glad it was helpful!

@newentu 5 ай бұрын

Excelente curso men!!

@parthasarathimoharana5282 3 жыл бұрын

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

@dcode-software 3 жыл бұрын

Cheers mate!

@parthasarathimoharana5282 3 жыл бұрын

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

@muhendis_ 9 ай бұрын

it was awesome video 💫

@curlyt8198 2 жыл бұрын

Thank you very much 😃😍 !!!!!

@EnzoAuditore Жыл бұрын

thank you for this.

@nkhanhle8968 Жыл бұрын

Thank you so much!!!!

@haleynaga5671 9 ай бұрын

Amazing!

@BlackFlux22 Жыл бұрын

Great tutorial, thank you

@dcode-software Жыл бұрын

Glad it was helpful!

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

@muneeburrehman4690 Жыл бұрын

Thank you!

@shanilka_wariyapperuma Жыл бұрын

This is GOLD!!! ❤❤

@dcode-software Жыл бұрын

You're welcome!

@MuhammadAdnan2.0 3 жыл бұрын

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

@bhagyashreekhairnar683 11 ай бұрын

thank you :)

@mcrmehmet 2 жыл бұрын

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 2 жыл бұрын

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

@mcrmehmet 2 жыл бұрын

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

@akshadrathod9203 Жыл бұрын

nice one

@vesemechristiana5265 7 ай бұрын

Thanks alot

@GaetanoBarreca Жыл бұрын

Thanks!

@dcode-software Жыл бұрын

You're welcome 😊 thank you for your donation!

@esnapeye7098 3 жыл бұрын

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

@balenmohammed1657 2 жыл бұрын

Brilliant

@tamilmemerguy3200 4 ай бұрын

Thanks

@ajithkumarv603 2 жыл бұрын

Wow awesome

@justtestingmycurrentskills747 3 жыл бұрын

Nice Video

@dcode-software 3 жыл бұрын

Cheers mate!

@noxius7332 3 жыл бұрын

Saludos desde argentina 😎👍🇦🇷🇦🇷🇦🇷

@GoatCS 4 ай бұрын

What VS code theme is that?

@Martin958 3 жыл бұрын

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 3 жыл бұрын

I've got a few videos on those topics, particularly promises and the async/await syntax.

@Martin958 3 жыл бұрын

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

@rostyslav5334 3 жыл бұрын

'Like' instantly without even watching a video

@dcode-software 3 жыл бұрын

Love it, thanks mate!

@onee Жыл бұрын

I seem to get PointerEvent instead of the MouseEvent.

@muhammadans2193 3 жыл бұрын

please make a video on client-side form validation

@dcode-software 3 жыл бұрын

Sounds like a good idea, thanks!

@vesemechristiana5265 7 ай бұрын

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

@oceanview3165 Жыл бұрын

Which vs code color extension did you use?

@pablozuta2402 Жыл бұрын

It's called 'dcode'

@oceanview3165 Жыл бұрын

@@pablozuta2402 Thanks bruh! it looks lit 🔥

@alvarobusquets Жыл бұрын

Who needs this while chat gpt can solve everything

@andreisavitski6145 8 ай бұрын

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 8 ай бұрын

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

@folatech4404 Жыл бұрын

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

@sdaiwepm 8 ай бұрын

0:29 I see what you did there.

@logaimat5362 22 күн бұрын

pls next time use dark mode !!!

@Dexter101x 3 жыл бұрын

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 3 жыл бұрын

Which event was it?

@Dexter101x 3 жыл бұрын

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

@dcode-software 3 жыл бұрын

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

@Dexter101x 3 жыл бұрын

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