33: What Are JavaScript Events | JavaScript Events | JavaScript Tutorial | mmtuts

today I'm going to teach about events inside JavaScript and events it's a huge feature when it comes to using javascript and events is something that happens all the time any time we use a browser or any time we use a website for example were to resize the browser if it were to go to another website if it were to click a link inside a website if it were to move my mouse around inside a website if were to scroll anytime we do anything inside a browser or inside a website we call it an events now the first thing you should know about events is that we have two types we have browser leveled events and then we have Dom there with events both the browser and Dom has a ton of different events that you can use and I'm not gonna go over all of them in this episode because there's way too many to go over in order to explain all of them but I will go ahead and even link the description where you can see a list of all the different events that we have when it comes to browse the level of ents and Dom leveled events now when it comes to the browser leveled events we have something called load we have something called resize scroll there's a bunch of different things we can do inside the browser in order to get a website to react in a certain way when we do something inside the browser when it comes to dom live with the events which is when we do something inside a website we have a bunch of different ones such as clicking on something we can drag our mouse we can also just move our mouse around and we also have a bunch of different form based events which activates anytime we do anything using forms inside our HTML website so the question is how do you actually use events inside a website well first of all we need to actually grab the dom node or the element do want to do something to in order for something to happen using javascript for example if I had a link inside the website that when I clicked it then something needs to happen regarding JavaScript the next thing we need to do is we need to actually tell it well now that we had this dom node what kind of event do we actually want to happen do we want to click it do we want our mouse to just mouse over it if you just want to do something when the mouse lets go of that specific link there's a bunch of different events we can apply to that element and then the last thing you need to do is we need to actually have the JavaScript code which is usually a function that needs to run once you do actually do something to that specific Dom nodes or elements so what I want to do is I want to give you guys an example of how exactly we can use events using javascript as you can see in front of me here I do have a very busy website you can't really call this a website it's just a small example and what I want to do here is I have a button at the top of the website inside the corner and once I click that button I want this specific side menu over here which has a certain height and a couple of links inside of it I wanted to close to the side or open up from the side when I click that button called menu I chose this example because I know a lot of you have seen this before inside many different websites when you talk will open or close a menu using a button so something you might be a little bit familiar with so what I'm going to do is I'm going to go inside my index file just to sort of show you what I have in here right now I have a anchor tag that works as the menu button that we click no to open and close the actual menu and then I have the actual menu down here what I did is that just simply style the menu so we had a 300 pixel width of the menu and then what I did is what I want to do is I want to close this menu when we enter the website for the first time so when the website loads I want this to be closed and the way I'm going to do that is by setting a margin to minus 300 pixels because then I'm going to push this menu 300 pixels to the left meanings gonna go outside the website so we can't see it then when I click the menu button is going to have a serial pixel margin left meaning that's just gonna jump back in place so the way we do that is by going inside our script tag and the very first thing I want to do is I actually want to grab the elements that I'm going to do something with so first of all I'm going to say we have a Lipsyte variable and I'm gonna go ahead and call this one menu button so menu BTN let's actually spell it correctly BTN and I'm just gonna go ahead and set it equal to document dot query selector parentheses and then I want to select first of all the button that we're going to click on which is going to be the one that we attach the event to so when we do something this button here something is to happen so I'm just gonna go and refer to a class I have called menu - button which again if I were to go inside my index pace as you can see it's right here the next thing I want to do is I want to grab back to a menu that I want to do something to so as you can see I have a class attached to it called menu so I'm just gonna go back inside my script tag or inside my script file I'm just gonna go out and copy paste this line of code and paste it below here then I'm going to call it something else like menu and then I'm just gonna go ahead and change the class name in here - menu now the next thing I want to do is something that we do quite often inside JavaScript now we could have done this differently we could have a platic class to this div element that is sliding in and out where we just applied a class in order to give it a zero margin and then we removed the class in order to push it back in but I decided to do it in this way where we just simply change the CSS because it's something we've done a lot of before in some of the previous lessons so that's why I chose to do in that specific method in this episode just in case anyone is wondering so what I want to do is I want to have a sort of status that tells me is this menu open or is it closed so what I want to do is I want to create another variable I'm gonna call this from menu toggle or menu status would actually be better like so and again I spelt menu wrong I have a habit of doing that and so status and I'm going to set this one equal to false because I want it to be closed once we go into the website so what I want to do next is I want to actually create the function that is actually going to toggle it back open and close it so I'm going to create a function here so I'm gonna say function I'm gonna call this one menu toggle parentheses curly brackets and again a spelt menu wrong I have no idea why I keep spelling that in that way it might be because in Denmark we spell it with a y at the end so that's why I keep making the mistake so inside the function here what I want to do is I want to run an if statement because I need to check do we actually have the menu open or is it closed so what I want to do is I want to say well is menu status equal to false if it is equal to false then we need to open it inside the website then what I want to do is I want to grab the menu from up here they don't want to do something to and then I want to apply a styling to it using JavaScript so we're going to use the style property and then I'm gonna say I want to style the margin left and then I want to set it equal to zero pixels because right now if we have a menu that is false then it's going to be closed so I want to open it up so I want to disable the negative margin by setting it to zero they're not what I want to do next is I want to change the menu status which is up here from false to true next thing we do is we go down here and create another we can create an else if statement so we can say else if and then inside the else if statement want to do the opposite so instead of taking for a false statement then we want to check for a true statement and then we just copy/paste what we have here and do almost the exact same thing except this time you want to revert it back to negative 300 pixels with the margin so I'm going to say negative 300 pixels and then we want to change it from true to false so that next time I click the button is going to go back up to the first if statement up here the next thing I need to do is I want to make sure that the menu is actually closed once we load up the website because if I were to go inside of it inside the browse as you can see wants a refresh it is still open inside the browser so what I want to do is right before we have the function and what I want to do here is I want to run a little bit of Java code as soon as the website is loaded so what I'm going to do is I'm going to apply a little bit of styling to the menu so I'm just going to go and copy what we have down here inside the else if statement I'm just gonna go and paste it up here because as soon as the website loads I want to start with a Martin set to zero negative 300 pixels now you could argue with that you could go inside the stylist hidden just go ahead and apply a negative 300 pixel inside the styling and you could do that I mean it's up to you but I just want to do it using JavaScript because this is a JavaScript lesson so why not do it in that specific way so I'm going to just go and save it here then I'm going to refresh the browser and as you can see we now have a closed menu the next thing we need to do is we need to create something called a event handler now what an event handler is is actually that line of code that goes into the website and says once we do something to this specific dom node then run this piece of java code for example a function so what I'm going to do at the bottom here is I'm going to say well when something happens to one of the Dom nodes I'll need to actually grab that specific Dom node in this case I did actually refer to the menu button up here I'm just gonna go and copy it paste it below here and then I want to say what kind of event don't want to happen to this specific object and in this case here we could just go ahead and say one a on click events which is a very typical one to have when you want to click on something and then something happens so we can't just say on click and then I want to set it equal to the specific function I want to run once we actually click this specific object now I do want to point out when we do actually refer to a function like they want to have up here called menu toggle then we don't add the parentheses at the end otherwise this function is going to run once the code actually gets loaded so in order for the function not to get run immediately once we load up the website we need to not have the parentheses behind here so that's a very important detail so once we do this we do actually have a event handler if it were to go inside the website refresh the browser click the button you can now see that we have a open menu inside out browse if we were to click the button again you can now see to be close back down to menu now I do want to show you one more thing which is a typical thing I see people do when they use events inside their HTML when it comes to using javascript which is you can in fact go inside your if you were to go inside any of your HTML files and go inside one of the elements inside wanted to start tags you can actually go to apply events directly inside the HTML so if you want to go inside their specific dip tech you actually let's go ahead and take the anchor tag we have up here I can go ahead and write an attribute with the name of the event I want to run so for example unclick and then I want to set it equal to the function that I want to run inside this specific element here so I could actually say menu toggle and as you can see when we do actually add events in line with the aides to meld and we don't need to neglect the parentheses at the end so we do need to include them here in order for it to know they want to run a JavaScript function so this is how we do events inside Java scripts so in the next episode I'm going to show how to prevent some default events from happening on some different Dom nodes that you have inside your website now just to show you what I mean when I say default events that Mexico didn't go inside the browser now I completely refresh the browser here when I click this button up here which is technically a anchor tag inside the HTML you'll notice that inside the URL when I click did we get this little hashtag symbol because it's not linking to anywhere inside our web site and when we do this the website is going to refresh the inside page meaning that if it were to have been scrolling down on the page and I wore down at the bottom of the website and then I want to fire off some kind of JavaScript event then it's going to take us back up to the top of the page which might not be an effect we want to have in some cases with forms as well if I want to not submit a form directly but I want something to happen using JavaScript before we submit the form then we also need to prevent the default event from happening in some of these elements so that's what I'm going to teach in the next episode so I hope you enjoyed and I'll see you in the next episode [Music]

Channel: Dani Krossing

Views: 56,508

Keywords: What Are JavaScript Events, javascript events tutorial, javascript events tutorial with example, javascript, tutorial, javascript tutorial, js, js tutorial, javascript events explained, events explained, events, what are events in javascript, mmtuts, events explained in javascript, add javascript events, event handler in html, event handler inline html, js event handler in html, javascript event handler in html, html event handler in javascript

Id: mlxi1WUSO_8

Length: 12min 32sec (752 seconds)

Published: Tue Oct 16 2018