Introduction to JavaScript Event Listeners

all right in this video I want to talk about JavaScript the event listeners oftentimes when you're building web pages and using javascript or if you're building hybrid mobile applications the type of programming will often be described as event-driven programming javascript is often described as an event-driven programming language so what does that mean well when you have a web page and you're adding javascript to it what you're doing with the JavaScript more often than not is you're trying to define and control the users interactions with that website or that web app so you're waiting for things to happen you're waiting for the user to tap on something you were waiting for the user to fill out a form submit it form click on a link click on a button these are the types of things that a user would do when interacting with that page these are all events so the image that you wanted on the page finishing downloading a Ajax set request to a web server when that gets back that's an event the user touching something on the page these are swiping these are all events typing inside of a flung field is another event and the basic syntax that we will use in JavaScript for this looks like this so you'll have some sort of variable here this represents your elementary object you'd a with your input tag your link your button the image that was loaded for the an ajax call so you've got some sort of object here isn't this will be a variable more often or not then you use the built-in add event listener method now this is a method that's available on practically every object not every one but practically every object you're going to be working with in JavaScript they all have this method added endlessly and what this does is it tells the browser hey I'm going to define for you of an event click load blur for this Mouse down mouse up these are all different types of events so you're going to define the type of event here and then you're going to give it the name of a function to call now we could put an anonymous function in here without a name we can use fat arrow functions and if you've got a very simple one line of code you want to do Austin the fat arrow functions will be put in here but at the very least you're going to put the name of a function to call so let's say I had a variable called my div and I'm calling add eventlistener evangelism and on my days I'm waiting for it click and I will call a function called consistent so somewhere else in my code there will be function with this name when the user clicks on this div whatever this div is so that could be say this paragraph right here this variable could be a reference to this paragraph in my HTML when the person clicks on this paragraph the browser knows at that point in time it is supposed to call this function do something and inside here there will be an object that's automatically passed the add event listener will pass into this function the event so in this case it's a click event we could then if we needed to console.log or use an if statement or something like that it's a uni dot type that will be click this is the type of event that took place you want to know what the element was that was clicked that caused this function to be called authors have properly called the target that tells you hey this my kid my dear that was the target so fitting a console log here I will get that piece of HTML whatever that piece of hTML is that will be written out in my console so you can see you can through this event object I'm going to be able to get marked in the type of event that happened I can get back to the object that it happened to so if I've got six things that are all using the same function I can figure out which one of the six things was actually clicked and then do something with that all right so that's the basic idea behind it let's do a few practical example actually one last thing I just want to comment on when people start programming with events something that sometimes gets missed is the fact that in here I'm putting the name of my function but the name does not use these right here the parentheses are not put on to the end because in my code somewhere else if I was to write do something and then on another line I write do something like this these two lines are very different this one it's just giving the name with function it's just like if I said to you if your name is bald and I said Bob I'm not saying to do anything it's just it's the name here because I added the parentheses at the end I'm telling this function tape at this point of time you are supposed to run so that is going to make this run and then inside this function is to return the number seven when this event happens at some point in the future because in tilt the function to run right here in this line of code it's going to run the number seven s can be passed back to here and then this is what's going to be left in your code when the div actually does get clicked the browser is just going to think to itself seven it's not going to do anything so we want to be very careful that we just put the name of the function don't add the parenthesis onto the end of it all right comment this comment that and I'll flip these all at the bottom so they'll still be in the file when I leave it in the code just but or just not going to be using that for our actual examples now if we look at the web page see we have to work with you we have a button with the ID BTN we have an anchor tag with the ID lnk it points to google.com there's an input tag which is a form element a text input and it's got an ID of txt if we were to look inside the web page this is what it looks like there's a button does event as an input and we want something to happen we're just going to do console logs but it could be anything you want and just get your functions to do whatever you want in these examples I'm going to save when the person clicks on this button write something down here when the person clicks on this link write something down here and the person typed something here write something down here when the person taps on a keyboard without being inside the text field if they're just using the keyboard if I hit the enter key I want something to happen down in the console so those are going to be the four events that we're going to look at and there's one more that we'll talk about after we've got those ones working I have my script tag at the very bottom of the page here the reason I have a script tag at the bottom is I want this script to be aware of these three elements and the IDS that they belong to the browser will read this HTML from the top to the bottom so when it reads this script it will have already read these in a will know about these elements so this is important for what we're doing here if my script were up in the top and I told it to add a click listener to D button for example it wouldn't know what the button is because it hasn't read down into the body yet it hasn't been read that one part of the code so we put a script at the bottom so we can use this all right so what et and ebook just use the simple get element by ID that's my button my link my IDE okay and last one txt again so those are my three which is on the page that I'm going to work with let's start with a click event this is a very common event to use I'm going to say BTN that is my comment added end listener just likely to hear object add event listener and then what's the event ID it's going to be a click and at the very end I'm going to call a function I'm just going to make up a name the bottom you click it's good to use function names that are very descriptive so you know what they're supposed to be doing so function the clip this kind of one I will have the click event pass to my function and then I can do console dot log V dot type so I should say click maybe dot target and there's another related property called I missed target which we'll talk about a little bit later so I'm going to attach this so this function will be called but not until I click on this button it's not saying go back to our web page refresh this when I click the button there we go click was the new type of event and target and current target a lot of the time these will be this is the same value in these properties but there is virus the piece of HTML that was clicked that had the click event happen to it that isn't work okay thanks mark now for the link second one okay after this one again we're going to listen for a click events and we're going to call let's call it ankle clicked I'll leave you to it and let's try to solve something that we did here say dammit something's going to happen here which is not what we want but I'll click on this that's the work supply Thomas hey we didn't get a console we've actually traveled to the google.com buy or google.ca page so why did that happen well when you click an anchor tag the browser knows it's supposed to take you to this address that's just it diesel behavior doesn't matter what you want to do that's the behavior that it wants to carry out so even if it's in the middle of running a function you told it but the user said so I click the link I want to go there so what we want to do is we want to stop that default behavior from happening and local influence there is built-in method called forget default belonging to every object so maybe prevent default this will stop the link if I'm being followed flash this that still works and now this works there we are we had the click event and it's happening to this anchor tag you can see if the anchor tag the text that's inside of it the ID all of it that whole object that is the thing that was being clicked so we stomped the link this is something that you need to do if you're using anchor tags or if you're using phones when somebody clicks a button inside of a forum the browser's default behaviors to not to submit that form so if you want to stock this one from being submitted and the webpage from being we loaded you'll have to do an EVP vent default one alternative to this because I used named functions in here I didn't mention earlier you could use an anonymous function so I just want to show you that alternate syntax here to comment this out okay instead of naming the function we can put the function here so this can be an anonymous function it will have meaning passed to it and then inside here the one where there's the type of target this will work the same now the difference between these two is really it's a question of what you're going to be doing in your code is this function something that you're going to be calling from other events on other places in your code do you want to be able to be use your function so here because it's got a name and it's defined separately I could use that from other places in my code here I'm saying now this is something that I'm only ever going to be doing from here and if you want to use the new es6 fat arrow syntax we can do that to script this so I'll leave a link in the bottom to the video on d-flat arrow syntax but same sort of thing and because this is just one line if two code you can do them in this down I'm planner you can get rid of those and you can just do that okay there we are so single line does the little thing so look when it's clicked call a function pass evie into the function and this is the one thing that we're going to be doing just show you that I still work click click button click the link Oh no there isn't just one thing we're also getting preventing fault lightly so I do need to keep target vs. there because I am doing prevent default fresh there we go there's the link okay great so that's a click event being used on a button and an anchor we have another you can't it's not just click events that we're doing with this the text we're going to add eventlistener we're going to listen for these input events and this will be one of that other functions input' is when somebody is filling out a text field it's over here as I'm typing inside of here when I'm done if I hit the tab key to move on or if I click somewhere outside of the form if the contents of this have changed from when I first clicked on the field when I first tab to it and put focus on this field if the contents have changed that will trigger the input event so console.log and i want to know the contents movie.com target that is the input and I want to know what's the mood value and what the person is typed so target is the input element this thing right here and I want the value property that is where the person is now typed fresh this the C here we go a C so I'm changing the value of what's typed inside there and you can see if every time I change the value I didn't even get to click away from this every time I change the value it's triggering my input event there's another similar related one there is a change event this is the venn that is not on every key class it's just when the person leaves the field multiple days of the field sometimes for fun boss finish a boy so these are three similar related which one of these event listeners is columnist so we input change envelope three similar guys want to click here and click away blur is being cold click back tight a the input event just fired my leaves change and blur both fired the change event happened because when I clicked on the field it was blank when I left it when I'm word it was different there's no longer blanket was now a I click on it again act like a wedding the blur event will fire but the change event won't because the change event only happens when I blur if there's been a change click away now the change event fires so input change in blur three similar related events okay so we have all these event listeners now one other that I wanted to show you was having to do with all this content being here and the script tag being at the bottom close this and put this up at the top like that back to the page refresh I'm getting an error on line eight cannot believe property at event listener of no so evident listener on line eight it couldn't lead to she didn't know what tht was txt said go find me the thing that the ID THD well at this point in my HTML that is nothing the ID txt so therefore this is null and then we're trying to add an event listener to null to prevent problems like this from happening what we're going to do is we're going to take these add event listeners you don't need the function it can go on its own little tip this one here the fact enough so all of this code right here all of this we're going to be putting this inside of another function alright taught it over a function called init this function I don't want that function to run until the browser has finished reading all of the HTML and it knows about all the IDS on the page that is actually an event itself so if we come inside here in the same document the document object exists that's our word page we can add an event listener to the document and the event we want to listen to is Dom content loaded when that fires when this event happens that's when I want this to run and this event means the browser has finished reading through all the HTML so after I've read through all the HTML then I can go and do all this to a web page refresh no JavaScript errors and I can carry out qualities event listeners all these functions work now because I was able to target those three things and add the event listeners after the browser had read everything so this allows us to put our script tag up inside the head and have the event listeners still work okay excellent so that's a fairly detailed introduction to JavaScript event listeners if you have any questions please as always leave them in the comments

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 46,733

Keywords: MAD9014, MAD9022, JavaScript, web development, hybrid app development, events, javascript events, event-driven programming, event driven programming, event listeners, web dev, 100DaysOfCode

Id: EaRrmOtPYTM

Length: 22min 6sec (1326 seconds)

Published: Sat Jul 29 2017