Event Listeners - Javascript - Tutorial 14

hey welcome to draft Academy my name is Mike in this tutorial I want to talk to you about event listeners in JavaScript an event listener is basically something in JavaScript where you can run a specific function or a specific block of code when a user does something so for example if a user clicked on a button I could then call a function and do something or if a user like hovered over an image or something we could perform a specific function or if the user scroll down or pressed a specific key on the keyboard we could do something basically event listeners allow you to monitor certain HTML elements or certain elements of the HTML page and then when the user interacts with them you can perform certain functions so I'm gonna show you guys how to do that the first thing we're gonna do is have something happen when I click this button so I'm this big button over here and when I click it nothing happens not really a good button right over here in my HTML file you can see down here we have just this button it has like an ID it says click mean I'm gonna show you guys how you can execute a JavaScript function when this button gets clicked so there's actually a certain HTML attribute that we can give to this and I can say on click and I can say equals and then quotation marks and this is what's called a JavaScript event so on click is a JavaScript event and when the user clicks on this button the JavaScript code that's inside of these quotation marks is gonna get executed so if I wanted I could put some JavaScript code in here and I'll just say alert you whoops these need to be single you click to mean right so I'm saying on click I want to execute the following JavaScript code alert you clicked me out onto the screen so now when i refresh the page and I click the button you'll see that we get this alert it says you clicked me right and that's kind of cool and so whatever code I put inside of these quotation marks is gonna get executed when I click that button although here's the problem it's like putting you know a bunch of JavaScript code inside these quotation marks it's kind of a drag and if you're writing a lot of JavaScript you're not gonna want to put it inside of there so what we can actually do is call a function from inside of this on click and then we can execute that function in like an external javascript file so I could write a function here I could say handle click and now whenever this button gets clicked it's going to execute a JavaScript function called handle click so I'm gonna go over to my script J s file and this is my external javascript file that's linked up with that HTML file and I'm going to create a function called handle click and inside of this function now any code that I put in here is gonna get executed when I click the button so I can write out an alert that says clicked and now when i refresh the page I click the button this function gets run so that's the basics of handling like a click event for example when that button gets clicked now this function is gonna get run and I can also put this same thing on the image so if I wanted I could copy this on click line right here and I'm just gonna paste it over here on this image so now when we click the image that handle click function is also going to get called so I click the button we get the alert if I click the image we also get the alert so these events can be used on any HTML it doesn't really matter what it is but here's another question is let's say I wanted to when I click this button I wanted to change the text on the actual button well I'm gonna have to be able to access that button and what you can do is you can pass a parameter inside of this handle click function and you can actually pass the current element that's calling it so in here I can just say this and when I use this keyword what this is gonna represent is the current element that's calling this or the current element that's getting clicked so this is actually going to represent this button so when I go over here into my JavaScript file now I can just add in a parameter up here we'll just say element and now I'll be able to access the element that got clicked so we can get rid of this alert and I'm gonna say element inner HTML so I'm gonna modify the inner HTML in this button and I'll just set it equal to clicked so now when I come over here and I click this button you'll see that the text changes from click me to click so every time I click this the text is gonna change so really I could do anything I want if I clicked this I could instead of setting the inner HTML I could set the style and we could like change the background color to blue so now when I click the button the background color is gonna get changed to blue so that's kind of the basics of using an on click with an HTML element and then you can see how we can pass in the current element that's doing the clicking into this function and then we can access it and modify it so that's one way that we can use these event listeners there's another way that we can do it though and we can do it entirely from the JavaScript so when we did this we had to put this on click attribute on this actual HTML element but there's a way to for example monitor for a click or monitor for a different event without having to use the attribute inside the HTML and I'm gonna show you guys how we can do that with this image so what I want to do is whenever I hover over the image I want to make the image a little bit bigger and I want to give it like a background shadow so it looks like we're hovering over it so I'm gonna come over here into my JavaScript file and I'm actually gonna create a variable and I'm gonna make a variable for that image element so I'm basically gonna grab that image element off the page so I'll say there and we'll just call this image is equal to document dot get element by ID and the ID of that image I believe is just image so actually let's double check that so yeah the idea is just image right there so this image variable is actually storing that image over here this picture of the draft Academy logo so I can say image dot AB event listener and what this is gonna do is it's basically gonna add an event listener onto this HTML element so remember we had to physically add that on-click event listener on to that button element but this is gonna do it for us using JavaScript so I want to pass this to parameters and the first is going to be the event that we want to watch out for so in our case we want to call this event listener when the mouse hovers over the image so there's an event called mouse over and basically what this will do is it will execute some code when the mouse goes over the HTML element and the second parameter we can pass is the actual code that we want to execute so what we can do is we can put a function inside of here and you want to pass this a function and you'll notice here I'm creating a function I'm just saying function open and closed parentheses open and close curly brackets and I'm just gonna click enter and now any of the code that we want to execute when the mouse goes over this image we're just gonna put in here inside of this function that we passed in as a parameter so any code that I put in here is gonna get executed when my mouse goes over that image in our case we're gonna want to like I said modify some of the styling about that image now if I want to access that image HTML element all I have to do is save this and this is automatically gonna represent the element that just got moused over so I can say this dot style and I want to set the style equal to we'll give it a box shadow and it's just gonna be like two pixels two pixels two pixels and we'll make it gray so I'm gonna give this some styling and then I also want to modify the size of the image so I'm gonna say this dot width and we'll set this equal to 150 pixels or just 150 so now when I mouse over this image you'll notice that this event handler is going to get called and so the image is going to get a little bit bigger and you'll see that there's this shadow under here so actually this is a little too big let's just set it equal to 110 so now when I mouse over the image you see it gets a little bigger we get that box shadow but here's the problem is when I mouse over the image it gets big but then when I Mouse out of the image nothing happens right it just stays the same so what I want to happen is when my mouse enters this image I want it to get bigger and where my mouse exits the image I wanted to get smaller so we can actually just create another event listener so I'm gonna copy this guy right here I'm gonna paste it but now instead of waiting for the mouse over event I'm gonna wait for the mouse out event and this will be called when the mouse leaves the HTML element so in that case we can just set the style back to nothing we'll get rid of that box shadow and we'll set the width back to a hundred which is what it was initially so now this should actually work so when I hover over the image it gets bigger and when I hover out of it it gets smaller so you can see how this basically makes the image like responsive to my mouse and that's kind of a common thing that you'll see in a lot of like websites is when you mouse over an image it gets a little bit bigger so that's the basics of using javascript event listeners again one method to do this is to put the event listener directly on the element like we did with this on click so you can literally just add the attribute onto the element the other method would be to do it through JavaScript so we can access the element we want and we can add an event listener and then we need to put the name of the event listener and we also need to include a function that's gonna get executed when that event is called in other words when the user Mouse's over or Mouse's out I want to point out one more thing which is the name of these events now there are you know dozens and dozens of these different events in JavaScript so I'm over here on this website it's called eight Gmail Dom events and it's a w3schools site and it's just w3schools calm for Tosh jsrf for slash Dom underscore obj underscore event so this is a great page because it lists out all of the events that you can watch for so you can see here's like on click and we have on mouse over down here on ma hsiao those are the ones that we use but there's so many more of these events like here's some keyboard events here's some frame object events clip board events so if somebody copies or cuts or pastes media events if somebody like plays a video or does something with media I mean there's all sorts of events that you can see there's just like this huge list so what you want to do is head over to this page or a similar page and check out all these different events that you can use I mean there's so many and you can play around with like changing different things on your website when certain things happen I mean this is like kind of like the core of JavaScript which is like you're able to monitor what's happening on the page and what the user is doing and based off of what the user does you're able to do other things in other words you're able to respond to the user and that's what's really cool about javascript and that's why these events are so awesome and I want to point one more thing out and this is just kind of a small thing but it's gonna come in handy so you'll notice over here on this mouse over in this Mouse out event it says onmouseover and onmouseout but when I use this event inside of my JavaScript over here you'll see that I instead of putting on a mouse out like this I just put mouse out and when you're using these events and you're using this add event listener you don't need to put the on with the event so in fact you don't want to put it at all so if I put on Mouse out this wouldn't work you just want to put mouse out you want to drop the on and that's for all of them but when you're over here in your HTML file and you're adding this as an attribute you always want to include the on so if I was to do like a mouse event I could say on Mouse out and so I'm gonna need beyond when I'm doing this on actual HTML file but if I'm using the add event listener function you don't need that on so that's just like a little tip and really like I would really encourage you guys to head over to this page or a page like this and play around with these different events because like I said this is really where JavaScript becomes responsive when you can respond to the user hey thanks for watching if you enjoyed the video please leave a like and subscribe to drop acad to be the first to know when we release new content also we're always looking to improve so if you have any constructive criticism or questions or anything leave a comment below finally if you're enjoying chopped Academy and you want to help us grow head over to draft Kadim EECOM forward slash contribute and invest in our future

Channel: Mike Dane

Views: 39,180

Keywords: Programming

Id: jrI0WFCCLWY

Length: 13min 54sec (834 seconds)

Published: Sat Oct 21 2017