Javascript Events Tutorial - How Web Developers Respond to User Input

all right we're going to learn JavaScript events today and JavaScript events in my opinion are really where JavaScript starts getting fun because you get to interact with the user as they interact with page so what an event is is that's anything that the user does to interact with a webpage so if I were to click here that's a click event if I were to mouse over here that's a mouse enter and a mouse leave event when I leave so we can listen to these events that's called listening to these events and we can react and interact with the user so let's kind of get into what these events are I'm going to show you I basically have this add numbers here that's basically a paragraph with an input called num1 and an input with the idea of num ID of num2 and then we have a paragraph with the idea of add some so it's probably clear what we're going to be building here is whenever they change add one and add two we want to create the sum yay sounds easy enough so let's go ahead and build this out if you remember from our prior lesson we do selectors to actually grab an element so let's actually get num1 here num 1 equals documents dot get element by ID and this is num - 1 there we go and let's get num2 as well up num2 there we go now let's go ahead get some while we're at it add some is add some believe that's add - some let's make check yep add - some okay so we've gotten our elements here and to add a listener it's very simple you just take your elements and do add event listener and then your first argument is the name of the event so let's do a click events and then this function will fire or execute every time that event takes place so let's just console.log hi there we go I have live reload going so this just refreshed so now when I click it console.log hi there you go you can see it going let's really let's actually make it alert hi here hi hi okay let's do some other events here let's do a mouse enter so now whenever I enter it oh hi hi okay how about a mouse leave so I'm in and I left and then I get the height some other events are focus and that's going to be whenever I whip focus on it there we go that's a focus event and now I can't get away and then a blur event but not blue blur event is going to be whenever I leave that elements let's see if I can get out of here okay some of those events are actually tricky to get out of when you're doing alerts so there's a focus and let's blur blur hi there we go so here's kind of a list of events see I got click mouse enter mouse leave mouse down as when your mouse clicks down Mouse up is when you let it back up a click is when the browser actually registers that you clicked because you know if you hold it down real long and then you let go that's not going to register as a click so click is only when it's fast enough to be a click mouse up mouse move is when you're actually moving over it it will actually send your coordinates your mouse back keydown keyup those are actually your keyboard events blur in focus we already covered them here's your full list of events which I'll include in the description as you can see there are a lot of them the ones you'll probably want to focus on are the mouse events some of these are called Mouse events and then some of them are called keyboard events and those are the ones you tend to use the most where this keyboard there you go keyboard events these are the ones you're going to use the most I'll put that in the description again now let's actually get into building this little addition program so what we want to do is we actually want to just add an input event which is whenever anything changes in the value of our input this work all the way back to I think Internet Explorer 9 so on the input events we want to do some addition now it's generally not the best practice here to create a function it's usually a better practice to insert a function that's been created here like add and then this is just going to do ads so whenever the input event file so we're going to run the ad function which is created right there that's good for several reasons which I can get into more later on one of the reasons is now I can fire that whenever either of these run so whenever the num1 has an input event I can run ad and when num2 has an input event I can run ad so that's one reason alone that it's great to pull it out so that way you can share this function between multiple elements that's kind of a good practice so we're going to do here is we're going to actually get our two values ver 1 equals num1 dot value that's going to be the actual value 2 equals num2 dot value let's console.log both of these one to a b c d e f so there we go we have our two values excellent and then let's actually add some we want to change the entertainer HTML add some enter HTML equals one actually we'll just say yeah one plus two so let's go check it out we got 12 and we have 24 and we got one two two four because anything that comes in from an input is a string type it's not a number type so how you convert that from a string type to a numbers just go parse floats so that's going to parse it into a floating number floating integer floating number I forget exactly that's supposed to be called so let's do 12 and 35 okay 34 okay so that works but if you notice when this is empty it says nod which means not a number that's because we just tried to parse undefined as a number so we can do here is we can do an or 0 these little double bars mean or which means if this value is basically no undefined non which is not a number then it's going to say okay that doesn't exist let's use the or value instead so I could say null or zero and I could do no or zero and basically one would equate to zero and two it equate to zero so really how this pans out to be is if this doesn't create a number we're going to use zero instead this doesn't create a number we're going to use zero instead so there we go let's try this now thirty-four excellent it did 34 plus zero and then plus one for 35 all right there you go we did our little number addition and let's do a little maybe your sum is and of course this will actually do something tricky as well three four plus two four why did that do that well because as soon as we start adding a string to numbers then it can't do that so it adds a number plus a number so kind of the way you get around this is go sum equals one plus two ah two numbers together I can do that javascript says and now we can add some in there so that'll work 34 plus two excellent in another way that you could do that is you could just go parenthesis like that one plus two and so that will do whatever's inside of the parenthesis first so that's a number plus a number that'll work and then it will add that number plus the string in which case it will turn them all into one big string so I'll just leave like that it's a little bit cleaner if you ask me excellent so there's our addition our addition is working thanks to click events so let's go ahead and do maybe one more example here I'm going to turn off this HTML and turn on this HTML so what I have here is I have a list of allies and I have a list of images now the images have a class of hide which means they're hidden up here my class hide in the CSS is display:none so I basically want to be able to click on this a tag and then I want that to show an image actually show it and hide it let me go and say this you kind of see what we have here so you have Simon Cowell Bruce Willis and Ben Carson three great guys of course and then up basically I want to click on one of those and so I've added an 8 raph of pound pound we'll just by default just reload your same page it doesn't really matter what we put in HRF because we're going to be returning false which means we're going to cancel this out it's never going to go anywhere so if that was google.com it's not going to go to google.com we're actually going to cancel that out but it's good to put something in there so by default if you have a link that you're going to be canceling with JavaScript just put pound in there so we have ID of Simon ID of Bruce idea of Ben and then our images we want a toggle or Simon pick Bruce pick and Ben pick okay let's go and build this out let's get rid of this JavaScript I will put that in the description on maybe code pen or something for you for a little bit later but for now we'll get rid of that let's go and grab that Simon elements better Simon equals document dot get element by ID and then this is just Simon there we go and let's get Simon pick Simon - pick I believe yet there we go so when Simon is going to get an eventlistener click function so whenever Simon gets clicked we're going to run this function if Simon pick class name so if it has the hide class then we're going to remove it class name equals there we go so basically if it has a class name hide we're going to remove it so let's go and click hey there is and then else we're going to put it back on so we go now it's going to toggle there is area isn't okay excellent so now let's do the same thing for Bruce Willis and Ben Carson and then we'll make this app a little bit cleaner so let's get everything that says Simon and change it to Bruce I'm using sublime text multiple cursors here sublime text and a lot of text debtors have this control D or Apple D or command D I guess that's going to automatically select all the same steps so I can change it which is awesome what and we got Ben Carson so Simon did that let's do Bruce let's find everything in here that's called Simon Bruce it just makes it so much faster to do this stuff and then Ben here we go we should have all three Simon Bruce Ben let's see what happens if I click a couple of them and now they're both showing that's something we can deal with a little later okay so all three of them are in here but I don't like this for a lot of reasons one this is a lot of almost identical code there's this thing that coders talk about all the cop all the things all the time called dry dry code don't repeat yourself I almost said do not don't repeat yourself d ry dry code this is not dry code because there's all this repeating this is basically exactly the same thing as this which is basically the exact same thing as this that's a really bad idea so we actually want to find a way that we can share all this so let's go ahead and create a new function here I'm just going to go ahead and mute you guys out and let's actually do a new function so that add event listener I'm just going to actually copy you let's get at one function that everybody can share that everybody can use we'll call it pick link there we go so now Simon can listen to that and Bruce can listen to that and Ben can listen to this excellent so now pick link can kind of do all of this at once I'm going to go ahead and scroll down eyes area get you guys some space up there pick link and then what we're going to do here is we're actually going to get it one thing that's interesting about an event listener let me go ahead and just console.log this for you basically when we start sharing stuff we don't know who got clicked on so we don't know if we clicked on I'm in Bruce or Ben when we fire this function so we have to look that up based off of this this will be the element that got clicked so this will be Simon if you clicked on Simon the value of this will be Bruce if you clicked on Bruce well here I'll just console.log it so you can see there we go so this is my a for Simon if I click on Bruce then I'm console logging this then that's going to be Bruce Willis base can be ben Carson so what I've done here is you'll notice I've added this data - IMG attribute so you're free to use with HTML 4 or 5 data - anything you want so I just called it IMG because this is going to be the ID of the image that I want to toggle when I click on Simon you'll notice that this has the idea of Simon pick and so basically when I click on this link I want to toggle Simon click so I added data image of Simon click data image of Bruce pick sorry Simon pick data image of Ben pick so I'm actually going to snatch that out so here's kind of how that'll work I'll go ver pick instead of before I was automatically looking at Simon pick Bruce pick or Ben pick well now I don't know which pick it is so it's just going to be very picky equals document dot get element by ID and I actually want to snatch the attribute out there out of there so ver pick ID equals this dot attributes so this again is my a link that got clicked on and I want to look at my attributes list and I want to grab data - IMG so I can't go day 2 - IMG that's bad syntax that's going to its data - IMG so there's another way that you can access attributes is I can do this and so that's going to be the data IMG so I can also do this attributes basically you can use it to access any value you want so I don't need to do that for attribute so I can do the cleaner version which is this way this data attributes dot data IMG is basically what I'm doing dot value so I'm going to get the value out of the data IMG attribute and so pic ID let's go to console log pic ID make sure I got this runner right there you go Simon pic is the idea I'm getting Bruce will pick and Bend pic awesome so now I just have to do pic ID so I'm getting my element this is the pic that I want to show and now I just have to kind of copy and paste this code here let's copy and paste this get rid of my comments and we toggle it over a little bit so now I'm just doing pick if picked out class name as hi get rid of it excellent this should totally work let's see Simon's working Bruce is working Ben is working so now what we did is it took a little bit of figuring out a little bit of reworking but look how much shorter my code is now so I've added three listeners I don't need you I don't need you and I don't need you excellent that's a very simple code and this is good for several reasons one I'm only creating one function so I'm using a little less memory than if I created three different functions and now any future functionality I want to add into my program it's all I have to do is change this one function and all three of them will get the results so remember that problem I had earlier where if I click on several I see them all well what I want to do is I actually want to hide every image I want actually hide every image that's in existence on the page first and then I want to show everything so I'm going to go document dot query selector all image there we go and then I would basically loop through that I could go very image all images and then I could loop through all images and I could tell each image to have a class of hide and then I could run through the rest of the code and show the one that I want to show I might as well do it for you right since I just told you about it let's do a for loop véra equals zero remember that for loop and how annoying they are you just got to keep doing it to you remember how to it I is less than all images dot length I plus plus man it takes a while to remember that for loop basically I'm just going to go through I as many times as it takes all images I so I want to get the image that I'm looking for let's see dot class name equals hide so I'm going to add hide class name to every image on the page and then I'm going to go through with the rest of my program let's see if this works oh it works excellent excellent that is exactly what I wanted it to do am i only showing one yep I'm only showing one awesome there you go that's JavaScript event listeners mixed in with some for loops and some selectors that's kind of tying some stuff together for you if it got a little complicated with this example don't worry just mess around with your math example for a while I'm going to post both of these on code pen and I'm going to put that link in the description have an excellent day

Channel: LearnCode.academy

Views: 294,967

Keywords: Web Developer (Job Title), JavaScript (Programming Language), Web Development (Interest), JQuery (Software), javascript tutorial, javascript events, javascript addeventlistener, addeventlistener, events, javascript events tutorial, javascript addeventlistener tutorial, js, tutorial javascript, how to javascript, how to, How-to (Website Category), Tutorial (Media Genre), example

Id: e57ReoUn6kM

Length: 18min 50sec (1130 seconds)

Published: Mon Jun 22 2015