JavaScript DOM Crash Course - Part 3

[Music] hey guys welcome to part three of this JavaScript and Dom crash course now in this part what I want to do is talk about events okay we're gonna look at all the different types of mouse events keyboard events and I know this doesn't this isn't going to be as relative to just the Dom as the last two videos but it is a very important part of interactive JavaScript you know adding event listeners to elements from the Dom so that's what we're gonna do in this video and hopefully you enjoy it so what we're gonna do is just go into our Dom j/s this is all our previous code from the last two videos and I'm gonna show you how to add an event listener alright now this is the the I guess the best practice for adding an event now you could do something like this actually we need to create a new button anyways because I want to look at some click events and I don't want to use the submit button so I'm gonna go right under the UL and I'm just gonna put a line break here and let's put in a button and let's give this a class I'm gonna put our bootstrap classes in hand just to make it look a little better so BTN also a class of BTN it's to do BTN doc I guess and let's see I'm also going to give it an ID of button and I'm using Emmet by the way that's why I'm able to use this syntax so we can do this and then we can type tab and it'll turn it into an actual tag alright so let's just say click here actually make this a block button too so I'm gonna add BTN block and now we have a little button here so what we could do what you may have seen in the past is you can say on click equals and we can actually run JavaScript in here we could say alert one like that and you'll see it'll actually run or you could set it to a function let's say we'll just call it button click and save and then we can go into our JavaScript and we can say function button click and we'll go ahead and just console dot log and we'll say button clicked and save and if I click it you'll see we get it down here now this is I guess the old way of doing it it's it's better to use an event listener because you don't need to have this in your markup okay you want to keep everything you want to keep it separate so we're gonna just get rid of that and we're just going to grab on to this using whatever you want query selector I'm actually going to just use get element by D since we have an idea of button so what I'll do is I'll say we'll create a variable I'll call it button and I'll say document dot get element by ID of button and we're going to say dot addeventlistener and we're going to listen for a click event and then we want to run a function okay so we can do this and then we can say console dot log one two three and now if I click it we get one two three now this is one way of doing it just having a function like this or you can use a named function so I can replace this with button click like that so now if I save now we get button clicked because it's actually calling this function alright so this is the ideal way of doing it now of course you can use what you've learned in the last two videos and do stuff with the Dom for instance let's say we wanted to take the header title so we'll say document dot get element by ID and we know we have an ID of header - title and we'll say dot text content equals changed ok so now if I click the button you'll see that the header gets changed if we want to do let's say document dots query selector and we'll get the idea of Maine and we'll set the style dot background our background color and we'll set that to light gray and save so now if I click the button it changes the title and it changes the background color of the of the Maine ID all right so of course you can you can integrate you know dot all these Dom selectors and properties that we've learned and you can attach them to events all right so what I want to do now is I'm just going to comment those out and we're gonna pass in an event parameter here okay when when you when you listen for an event and you run a function you can pass in this parameter and let's just take a look at this so if we say console dot log e okay or you can call it whatever you want you might see it spelled out as event whatever is is here we're just gonna log so let's go ahead and save that and click and now you'll see we get basically all of these different properties alright so we can get all kinds of stuff from here we can get like the class name of the of the element we can get the IDS or attributes we can get the the position of the mouse client X client Y will give us the position of the mouse when we click it so I just want to kind of take a look at some of the things that we can get from this so let's go ahead and just comment that out and let's say first of all it's due console dot log and let's log the target all right or a dot target sorry so save will click and it gives us the actual element that was clicked okay or whatever it or not just clicked if this was like a key down on an input a key down event it would give us the input okay instead of the button so whatever element and whatever element the event is fired from so let's say we wanted to get the ID we could say console dot log and we can say e dot target dot ID and we'll save will click the button and you can see the ID is button if we want to get the class say console dot log and we'll say e dot target and we can say class name and we'll click and it's going to give us basically this the whole string of all the classes now there's also a method called class list and this isn't just further event this is the this isn't just for the event target you can get you can get the class name I probably should have did this earlier but you could get the class name or the class list from any element so it's a class list and save click and it's basically going to give us this this Dom token list it's kind of like an array of the classes alright so see some other stuff we can get now we can we can output this stuff into the Dom if we want so for example if we wanted to let's put let's see let's just put a div here with an ID of output and we'll go ahead and we'll say C save our output equals document dot get element by D output and we'll say output dot in our HTML equals and we'll put an h3 in here and then we'll just we'll just concatenate in let's say e dot target dot ID all right so if I click and now you'll see the ID will get output to the Dom so just some stood we're just experimenting here I mean there's I don't really know why you would use this but just to know that you can alright so let's look at some other stuff now in the event object so we have the type so if we say console dot log and we can get a dot type okay but we're not using the target anymore we're just doing a dot type if we click you'll see that it's a click ok so it's basically going to tell us whatever kind whatever type of event that it is alright another thing that we can look at is the position of the mouse so if we say e dot client X this is going to get the position on the x axis when it's clicked so you'll see 194 if I go over here 3 4 9 5 5 4 so the client X is actually the position from the with the browser window so from here over and if we do client Y let's try client Y that's gonna be from the wind from the top down ok so you can see that actually let me just comment the X out so they're all pretty much around the same area because it's coming from the top down now that's from the window if you want to get the most position from the actual element that you're inside of then you want to use offset X and offset Y so let's say console dot log and we'll say e dot offset offset Y it's 2x and save and if I go right over here and I click we get zero and you'll see it it'll increase as I go over so that's from the actual element itself and then of course we can do y so if we do why if I click so there's negative 1 1 4 12 so as I go down it's gonna increase ok so just remember that client is from the browser or the window and offsets from the the actual element itself all right another thing we can do is we can test to see if when you click it if you're holding down the Alt key or the shift key or the control key so if we say console.log let's say e dot Alt key and save if I click it we get false now what I'm gonna do is hold down my Alt key and click and we get true so you can do things based on if you're holding these keys down or not so let me just copy this and then I'm gonna change this one to ctrl key ctrl key and this one is shift key so I'm just gonna click it everything's false I'm gonna hold down shift and click you can see that the last one is true if I hold down ctrl and click that one's true I hold down alt and click that one's true ok so you can do an if statement to see if shift was held down if it was then you can have different functionality in your script all right so that's something that may be useful to you all right so that's pretty much all I want to look at as far as the event object let me put a comment up here just to separate so this is where we started events all right I know this is messy the script guys but it's just kind of a reference for you guys to use when you're actually building something let's see what do we want to do next so next let's just take a look at some of the different Mouse events all right because we have we have different events based on different actions so we want to look at some of the mouse actions we already looked at click but what I'm gonna do is actually comment out this whole button click function I guess you know we'll get rid of this to comment that out notice I'm not deleting anything because I want you guys to have this but I'm going to create a new function here called run event and we're gonna pass in our event object here and we're gonna just console dot log and we're gonna say oops I'm gonna say event type and then we're just going to concatenate a dot type remember that we could get the type of event by using that dot type and then what we'll do is let's add let's see we're gonna create a variable for our button I shall just copy what we did up here except instead of running button click I'm gonna say run event alright so we'll save and we get event type click alright so let's look at some of the other types so if we go ahead and actually you know what I'm gonna do is let's move this down here and say button alright so this is this is gonna do the same thing it's just not connected like that alright now let's look at some other types of events so we also have double click so what I'll do is go in here and I'll say dbl click and I'm just going to comment out this lets save now if I click nothing happens if I go ahead and double click we get our run event and it's going to tell us the type which is a double click ok we also have the most down event so I'm gonna go ahead and change this to Mouse down and I'm gonna click down and as soon as I click down it runs okay it doesn't wait for me to lift up or anything as soon as that Mouse goes down that event fires off we also have mouse up okay in addition to most down so let's say Mouse up let's save I'm gonna click and hold nothing happens when I release then the event fires off okay so there's a difference between mouse down and mouse up alright so the next thing I want to do is see I want to test some other types of events but not with a button so what I'm gonna do is go and I'm going to create under the button I'm gonna put in a div and I'm gonna just I'm gonna give it a inline style I'm gonna give it a width of let's say 1 second let me just check my my thing here so we're gonna give it a width of 400 pixels and a height of 200 pixels and a background of light gray all right we'll save that and you can see we have a little box here let's let's put a line break we'll move it down a little bit alright so we have this gray box and I'm also going to give it an ID of box so that we can grab on to it so we'll go back to our JavaScript and let's create another variable I'm gonna copy that we're gonna call this one box we're gonna get by ID box and then I want to look at some more events so let's take a look at the mouse enter event so we'll say box dot add event listener and we're gonna listen for the mouse enter event and then we're gonna run event so let's save whoops that should be uppercase alright so as soon as I enter the box you'll see it fires off alright if I go out and I keep going in it'll keep firing that event off so we have mow center we also have most leave so if I go ahead and I paste that in let's change this to Mouse leave so we enter and then we leave and then that gets fired off so enter leave and to leave now in addition to Mau center and most leave we also have mouse over and mouse out so let's say mote mouse over and mouse out alright so we'll save that and then you'll see that when I enter both of those mouse over and mouse enter fire when I leave both mouse out and mouse leave fire off so what the hell's the difference they're doing the same thing well the difference is if this element has something in it like let's put in will put in an h3 and we'll just say hello all right so if we enter okay both are gonna fire off most over mouse enter now if I go when I go hover over that hello that that child element you'll see that hold on a second this is actually this is getting too confusing let me just let me comment out most leave and mouse out so we're only dealing with the enters so we go in the box both fire off if I go over the hello only the mouse over goes fires off okay the most enter is only going to be for that for the element itself but the over will be for any inner elements okay does that make sense you'll see that it keeps firing off as I go over this but the mouse enter will only be going in the actual the you know the the parent element alright and it's the same thing with most leave and mouse out so if I go ahead and comment those out and we'll do the same thing if we leave will get both but if we go on this one and leave we just get most out not most leave alright I hope that makes sense so those are some of the the other Mouse events now we also have mouse move so what I'll do is let's just copy this and let's change this to mousemove and then that's gonna fire off whenever i'm just in there and i'm moving the mouse now what's cool about this is we can actually grab the position of the mouse and we can do different things with it so let's go to our run event and let's take our output remember we have that variable output represent which is connected to this div right here so what I want to do is I want to help put the mouse position into our application or into our browser here so we'll say output equals and let's say we'll just put an h3 will say mouse X and we'll just concatenate onto that ee dot offset X okay and then we'll go let's see we'll end our h3 and then we'll put another h3 and it'll say mouse Y concatenate a dots offset Y and then we'll end our h3 like that let's save see oh we got to do output dot innerhtml and now you'll see that it's tracking the most position inside okay as I move it now we can take this a step further and do something cooler let's comment this out and what I'm gonna do is I'm going to say document actually no we'll just take let's take the box okay so we have our box variable which is set to the document dot get element by ID box so this this whole box here and we're gonna say dot dot style dot background color and we're gonna actually set this to RGB okay so you can set colors to RGB values which is red green blue so it'd be like the red color the green the blue and what we're gonna do is we're gonna take the red and green and we're gonna connect it to the number the offset numbers alright so in here we're gonna just concatenate like this so we're gonna say e dot offset let's do offset X here okay and then we're going to put for the green we'll concatenate ee dot offset Y and then for the last value for the blue we'll just put 40 alright so let's go ahead and save this and let's go in the box and move around and you'll see if the color is actually changing because it's changing the value of this RGB it's changing the first two parameters based on this wherever the mouse is alright now we could actually take this a step further and instead of doing just the box we could say document dot body remember we can access the body of the document and we'll change the style of that and now the entire body will change the background-color as we move all right so let's I think that's pretty cool is it practical and useful maybe not but that's not what this what this series is about this is just about learning all right so that's it for that now what we're gonna do is look at keyboard and input events okay so we have our form here we haven't even used yet so we're gonna work with this now I still want to use this run event right here I'm just gonna comment that part out let's comment this out all right so we're gonna need to grab on to the input so I'm going to create a new variable here called item input and we're going to set it to document dot query selector and we can use any selector we want in here so I'm going to say input and I want to grab the input with that has the type of text alright let's also create a variable for the form itself we're gonna need that at some point so we'll say query selector and we're just gonna grab let's say form alright we only have one form so that's fine so let's see let's go down here and let's create let's take our item input and let's add an event listener and we want to listen for a key down event okay so we'll say key down and then we're going to run the event let's go ahead and save and I'm gonna go and I'm gonna just click a key and you see that it fires right off each time I type that key that event is gonna fire off now if you want to and you probably would want to catch what you're typing in here then we could go down to our run event and let's say console.log and we can say console.log e dot target dot value so let's go ahead and save that and then as I type you'll see that it'll actually log what I'm typing so we could take this and we could output it somewhere so let's say we wanted to put it all right so we have this output div right here so what we could do is we could say document dot get element by D output dot will say inner text equals actually will do inner HTML equals and h3 and then in here we'll just go ahead and we'll put in a dot target dot value save and let's start typing and you'll see that it'll actually output down here all right so let's go ahead and just comment those out and hopefully you know doing this I mean this is just a mess of code but hopefully this gives you guys some ideas of maybe some stuff you could build all right so let's look at some other inputs we have key down so as you would probably guess we also have key up so key up is gonna run when you release the key so what I'm gonna do is I'm gonna I'm gonna push down and hold a key you get key down if I let go there's key up okay so that's keydown keyup we also have key press so if we say key press let's comment these two out and if i just press any key it's gonna go ahead and fire off alright so those are the key events now we also have other events that are attached to input like text inputs like this so we have focus and blur so what I'm gonna do is take the item input and let's change key press - let's say blur actually let's do focus first and we'll save focus is when you just click inside of an input like that okay you can see how it's alive it's it's it's active it's focused okay so that's going to run then now we also have blur so if we say before you click in we get focus we click out we get blur okay so in focus out bar now two other pretty cool events we have our cut and paste so if we go ahead and change this to cut and change this to paste and let's go ahead and type something in here actually let's comment these two out we go ahead and type something in let's highlight it and let's cut it and it'll actually fire that event off okay if you wanted to for some reason I don't know take the let's see what could we do here document dot body dot style dot actually let's do style dot display and set it equal to none if we go ahead and cut so home let's type something in and then we'll do cut and everything freakin disappears so just there's some weird stuff like that you can do I'm not gonna leave that that's just a stupid example alright and then we have pace so if I go ahead and I paste something in that's gonna run and it's gonna be the pace type alright now another one we have is input so input will actually run when you do anything with an input so let's change this to input alright so we'll save that and then I'm gonna just start typing we get input if I go ahead and cut we get input if I paste we get input so anything you do with this input if you are listening for that event it's gonna it's gonna fire off alright so now what I want to do is I want to add in a select lists or a select box right here so let's go in our index tml and we're gonna go let's go right after the text input and we're gonna put in a select and we actually don't we don't need a name and an ID I just want to select with a couple options let's say option we'll do 3 of them and we'll just say 1 2 3 this this doesn't really matter and let's actually add a class to make it look good a bootstrap class of form control and save let's also add a margin right to class just to push that button over a little and there we go so now we have a select item our select list so if you want something to fire off when you choose here you can use the change event so what we'll do is create a variable for this element so let's save our select will set this to document dot query selector and let's say we just want to choose the select element is only 1 and then down here we'll say select dot addeventlistener and let's listen for a change event okay so change and then we'll run event save let's go over here let's choose something and you'll see that that will fire that change event off if we want to get the value we can do the same thing we did with the text we can console.log e dot target dot value so if we save you'll see we get two three one so that'll give us the value and I believe if we if we do this the input that should work as well if we listen for input let's see yep so that will right input and change when we select those we'll both run all right so the last thing I want to show you is a submit event which is going to be on the forum okay we set a forum value here so we're gonna go form dots addeventlistener and we want to listen for a submit run event all right now if I go ahead and I just type something in we don't even have to type anything in but let's just click the submit button and notice that nothing's happening actually you can see a blink down there see if I keep clicking it'll blink real quick that's because it's actually submitting to the page okay it's just working like a regular HTML form in order for it not to do that you have to prevent that from happening and the way that you do that is you take this event parameter that's passed in and you call a dot prevent default okay which is a function that's going to stop that from happening so now if we go ahead and save and now we submit you'll see that it actually works okay it's not it's not submitting to to an external file or whatever it does by default all right guys so I think that's gonna be it for now like I said I think in the we'll have one more video and in that video we'll actually make this into an application where we can add items we'll be able to type something in add it to the Dom have it show up here and then maybe add a delete button over here that we can click and we can get rid of the elements here obviously they're not going to be persisted to a database or anything like that it's all just in the UI it's all on the Dom all right but I think that'll give you a little bit more experience on actually building something real instead of just you know the sandbox that we've been working in so hopefully you guys like this if you did hit that like button please describe if you're not and thanks for watching

Channel: Traversy Media

Views: 221,503

Keywords: javascript, javascript dom, dom, document object model, javascript tutorial, vanilla javascript

Id: wK2cBMcDTss

Length: 33min 45sec (2025 seconds)

Published: Tue Sep 12 2017