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

hey guys how you going my name is dom and today we're going to be taking a look at the basics of javascript events okay so today's video is going to be perfect for people who are just starting out to learn javascript or you've got a bit of experience under your belt and you just want to get a recap on how the events work okay so of course the first question here is going to be what exactly are javascript events well essentially they're going to allow you to react to when certain things happen on the page so for example when the user clicks on a button i want for example a drop down menu to show or another example might be when the user clicks on a submit form i want some sort of validation to happen so basically you have the event and then you have the action so in today's video we're going to cover four main topics around the events to of course gain an understanding of how they work so the first topic covered is going to be the usage of the very basic html inline events okay so these are things like your on click which you'll see on many beginner tutorials the second topic covered is going to be the usage of the add event listener function and this one here is arguably the most important the third topic is going to be the usage of the javascript event object and these ones right here are going to tell you information about the event which just occurred and the last topic is going to be the difference between a standard javascript function and an arrow function when it comes to the events so hope you guys enjoy and learn something from today's video let's get right into the first topic here the inline html events okay so starting off with the most basic form of a javascript event handler okay so right here i've got a fairly straightforward html file and we can see right down here i've got this div with an id of box and i've applied some fairly straightforward css styles to this box so now we can see in the browser it's going to look something like this so if i go back inside the text editor we can see inside the actual html for the box itself we can see it says on click alert hey decode so this right here is the most basic form of a javascript event and you'll find this style on many different beginner tutorials out there on the web now of course it's quite self-explanatory what this does when i click on the box i want this to say alert hey decode so now if i was to go inside the browser we can see upon clicking on the box we of course get hey decode right there and that is the most basic form like i said of a javascript event handler now of course if you're using a text editor like visual studio code if you go inside the actual div here and you specify for example o n or just on we can see there are many different events to choose from and of course when doing your own project you're going to be googling these things and finding out exactly what type of event you need to use for your own scenarios an example might be the on mouse over event and essentially it's going to allow you to react to when the user hovers their mouse over the actual div or the box in this case right here so for example i can just say alerts then i can say something like hover okay just like that so now if i was to save this we can we can see of course we actually have two event handlers right here the onmouseover and the on click and of course that is perfectly fine and valid to have so now saving this right here going inside the browser we can see if i was to hover over the actual box we get hover right there if i was to then click on the box we also get hey d code so right there we can see an example of adding the two events right there now what is the problem with this style of event handler well you can't actually do much inside these two inside these quotes okay so of course you can do quite a few things inside here but of course once your project gets more complex and you want to do many different things inside the event handler you're kind of restricted as to what you can do inside here and it can get very messy quite quickly so the better option is going to be to essentially put all of your javascript code inside its own separate you know section of the page or its own file and then do your event handling inside there instead it makes it much easier to work with and of course that brings us to the add event listener function okay so ad event listener is going to be the preferred way for you to add events to your javascript code and of course your web page so right here we can see we get a very similar example i've got the exact same div with an id of box but now i've opened up this script tag right here and i've specified some javascript code okay so essentially it's going to do the exact same thing and i can show you this right now so going inside the browser we can see upon clicking on the box we get right here hey d code so now looking at the actual code itself we can see in the javascript the first line of code here is simply grabbing the actual div from the html so right here i'm just saying a new constant or new variable called box div is equal to document.getelementbyid and i'm passing in box right here so for those of you who don't know essentially if i pass in box right here it's going to grab this div and now essentially this div refers to this box div right inside the javascript code so now i'm just simply saying box div dot add event listener and i'm passing through here the click event so similar to the previous example where we had the mouse over you can also pass in mouse over inside here and that is also going to work like i mentioned earlier there are many different javascript events to use so you're going to have to do your own searching and find out what you need for each different scenario but let's go back to the basic click event right here after this we're simply specifying a javascript function right inside here and i'm accepting the event object right there so we're going to get to this very shortly but for now we can simply ignore that and then going inside the actual function body itself i'm then saying alert hey d code so essentially we're moving the alert call from inside the html in the previous example to this function right inside here and this makes it a lot easier to work with and essentially you're going to have a much better time writing your javascript code inside the script tag or an external file compared to inside the html so of course we saw how that one works now what if i was to instead of specifying the function right here we can actually specify it externally so this right here is another example of what you might see so if i was to specify a function right inside here i can say function and call this function handle box click so essentially this function is going to do the job of handling the box click so now i can also accept the event object as we did earlier and then i can simply move the alert code inside here and then instead of having this function right here i can instead just say handle box click just like that and that is going to give us the exact same result it is simply just a different way of writing it and you might see this example or style also so if i was to save this we can see we get the exact same result we can click and we get hey decode so now we're going to move on to taking a look at the event object right here so let's look at that right now okay so moving on to the event object i'm referring to this e right here now i know this e confused me quite a bit when i first started learning javascript but it's actually very straightforward in what it actually does so essentially this e or the event object contains information about the event which has just occurred in the case of the click event you can find many different pieces of information about that click for example you can see if the user was holding down the alt or the control key when the click occurred or even the position of the mouse now to gain access to the event object you simply pass through a name for the event object right here inside the function now of course you can call this whatever you want for example it doesn't need to be e we can say ev or we can even say event right here realistically we could say absolutely anything like d code for example and that is also going to work but it is a nice convention to simply use e or ev as the name for the event object okay so that being said we can then reference or use the object inside the function by saying e just like this now right here i'm simply saying console.log and i'm passing through e so essentially this console.log is gonna tell me information about the actual object right there inside the javascript developer console so now if i was to save this right here and go inside the browser i can then using f12 you can toggle the developer tools right inside here and you may need to switch to the console output right up here to gain access to of course the console so now if i was to click on the object we can see so on the div we can see right here we get the mouse event inside the console right here and notice how it says mouse events there are many different event objects in javascript because of course this one right here was a click event a click event relates to the mouse so of course we get the mouse event there is also the keyboard event for example so now going inside the actual object itself we can see there are many different properties related to the event which has just occurred for example we gain access to the client x and the client y and these are just the the mouse coordinates when the click occurred we can see we get 108 and 80 right inside here if i was to click again this time in the top left corner we can see the client x and the client y are much lower at 10 and 10. we also gain access to things like the control key and the alt key which of course tell you if the alt or control key were pressed or held down when the click occurred for example we can see now the control key is set to false but if i was to hold the control key and click again we get right inside here control key sets a true so of course depending on your own scenario or use case you're gonna find these properties useful okay so of course it's gonna depend on your own project what you're doing you may not need to use any of these properties and that's perfectly fine but in many cases you may need to gain access to these different information regarding the event to of course do different things okay so let's let's move on now to the usage of the of the arrow functions in comparison to the standard javascript functions okay so moving on to the final part of today's video and that is going to be the difference between standard versus arrow functions when it comes to your event handlers okay so right here we can see i have two examples of the usage of the add event listener method okay so right here we can see the first example is very similar if not the same in fact it is the same as our previous examples we're simply saying function and then of course taking through the event object and then we're simply saying right down here console.log and i'm logging out the value of this keyword if you don't know what this keyword refers to that is perfectly fine this is still going to make sense in the second example this one right here is probably one of the more modern ways to write your javascript event handlers and this one uses an arrow function as we can see right here so these serve a very similar purpose and they do basically the exact same thing it's simply just a different way of writing out a javascript function this one is standard and this one is an arrow function now we can see i'm also logging out the value of the this keyword so now if i was to save this right here go inside the browser then click on the div we can see we get our two outputs right there as we can see in the case of the first example with the standard function this refers to or this keyword refers to the actual box itself so basically if i go back inside here in this case this refers to the exact same thing as box div right there and that is for standard functions when it comes to your arrow function this refers to the whole window global object itself so the reason why i pointed this out is because of course if you run into errors where you know certain things are defined or you know certain things aren't working just watch out for cases where you may be using an arrow function but then using this keyword always make sure if using this keyword right here you want to make sure you use the standard javascript function instead of the arrow functions right down here if you want to learn more about the arrow functions in javascript i've got a whole video dedicated to that so you can watch that too if you like and that is the basics of javascript events thanks for watching guys and i'll see you in the next video

Channel: dcode

Views: 10,608

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, website, webpage, web app, application, app, web development, web dev, javascript, ecmascript2015, js, html, html5, css, css3, html events, events, user input, react to, event handlers, event listener, event listeners, buttons, onclick, on click, click, double click, hover, mouseover, interative, interactivity, user interface

Id: YiOlaiscqDY

Length: 15min 11sec (911 seconds)

Published: Mon Jan 04 2021