Learn JavaScript Event Listeners In 18 Minutes

whether you're a complete beginner just learning how to use event listeners or if you've built multiple projects on your own using event listeners all the time i can guarantee you there's something in this video you don't already know [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now like i mentioned in the intro we're going to be covering a ton of information related to event listeners we're going to start at the very basics of how you create an event listener and how they actually work then we're going to talk about capturing bubbling and delegation and how all of that works because it's incredibly important to understand and most people really don't understand it well enough and then finally we're going to talk about a few minor tidbits here and there of bonuses that come with event listeners so this video is going to be jam packed full of information so make sure you stick around till the end to get all the information you need now to get started i have a really simple index.html file where we have a grandparent inside that we have a parent and inside that we have a child you can see on this right hand side we have this red grandparent blue parent and then green child and what we're going to do is set up event listeners for when we click on these elements so the very first thing i want to do is set up a click event listener on the grandparent in order to do that all we need to do is take the grandparent element so just type in grandparent and we put a period and as you can see the very first thing on this list is called add event listener so just type in add event listener and this is going to take two to three parameters for now we're just going to start with the two parameter version because that's the most common the first parameter you put in here is going to be the type of event that you want to listen for in our case we're listening for a click event there are tons and tons of events you can listen for and if you want to know what they're called just google you know mouse down event or mouse over event and it'll give you the exact name that you're looking for if you don't already know it the next thing we need to pass here is a callback and this callback is just a function that runs every single time that we do whatever the event is in our case click and this takes a single parameter which is the event object generally you'll see this called e we're just going to use an arrow function for our use case if you don't already know arrow functions make sure to check out my video linked in the cards and description it covers arrow functions in depth so now let's just come in here and do a console log of e to see exactly what this e is so now if we just come over here click on the grandparent you're going to notice we get this massive event down here with tons of information inside of it a lot of this information deals with where your mouse is on the screen it deals with where you're holding down like the control key for example there's a bunch of information inside of here but probably the most important information that you're going to care about is this thing called target right here target is essentially the thing that you clicked on in our case the grandparent so that is the target and target is just an element so it has all the normal element related information inside of it but generally when you're dealing with click event listeners or any event listener target is usually the most important thing that you want to mess with inside of the event listener because it is the thing that the event happened on so in our case that would be this grandparent so if we just console.log e dot target and i click on this again you're gonna see it prints out that grandparent element now one thing that's also interesting about event listeners is we'll just change this to print out grandparent one what we can do is add multiple event listeners so if i just copy this asa down here and put grandparent two inside of it and i click save when we click on this you're going to notice it's going to run both of the event listeners in the order that we defined them so grandparent one goes first because that's the first one we define and then grandparent two comes second because that's the second one that we define as the default behavior of event listeners and this right here is what most people understand when it comes to event listeners they know how to put the type in they know how to create a callback function and they know that they run in the order that you define them that's about where most people's knowledge stops so in the rest of this video we're gonna go beyond just this basic information and talk about everything else that there is to know about event listeners like for example you'll notice when i click on this child it still prints out the grandparent information why exactly is that well to figure out let's first set up event listeners for our parent and our child so let's just come in here we're going to copy this grandparent one paste it down and in here we're just going to say oops parent and this will just say parent and then we're going to do the exact same thing for child so here we'll say child and child so now if we click grandparent it'll print grandparent when we click on the parent you're going to notice it prints out parent one and then grandparent one and now when we click the child it's going to print child one parent one and then grandparent one so if you're paying attention essentially what's happening is that it's we're clicking on this element but behind this green child is also our blue parent and behind our blue parent is our red you know grandparent here and even further behind that is our actual document itself which we could set up an event listener for for example document dot add event listener click and we're just going to come in here and we're going to console.log document1 so now if we click the document it prints out document we click here it prints out child parent grandparent and then document and that's because it's working its way from the closest element in our case this child all the way to the furthest away element which is our document and it's running click event listeners for all of them because we technically clicked on all of them since the child is inside the parent and the parent is inside of the grandparent and the grandparent is inside of the whole document itself this process of going from the closest element to the furthest away element is something called bubbling you also might hear it called event bubbling and this is one half of how events work inside of javascript the other half of how they work is called capturing so if i just go to this elements tab here i'm going to expand this up so we can really see what we're working with get it as large as i can and open up the grandparent parent and the child so you're going to see at our very first when we click on our page we click inside the child right so our click is going to start at the child here it's going to go down to the parent go down to the grandparent and then all the way down to the document as its final step it's kind of working out of its hierarchy because we clicked on all of them well that is like i said the bubbling phase there's a second phase called the capturing phase and this actually happens first the way the capture works is it works for the thing furthest away and moves up so it'll start with the document then the grandparent then the parent then the child then we swap over to the bubble phase where we go from child to parent to grandparent back to document the way to remember this that i like to think about it is when you bubble generally bubbles move upward because they're light so you bubble up the tree so you start down here at the lowest most minute element and you bubble upwards out of the tree that's how i like to remember capturing versus bubbling like i said capture starts on the outside moves in and then bubbling happens second and goes from the inside out but right now all of our events are bubble events because as you notice we print child then parent then grandparent and document in that order because they're all bubbling so how exactly do we do a capture that is where this third parameter to the add event listener comes into play we can pass in here an option these options is just an object where we pass in different parameters to it so we could pass capture and set it to true by default this is set to false but if we set it to true we're saying we want this event to be a capture event so now if i save this and i click on the child you're going to notice something interesting it prints grandparent one then child one then parent one then document one and that's because our grandparent is in the capture phase so if we just go to our html here real quick what's happening is we start with the capture which means we start at our document then we move to our grandparent which we set up a capture event on so it prints out here then we do the capture for our parent there is no capture event so we skip it do the capture for our child again there is no capture for our child so we skip it and then we do the bubble so we bubble our child where it prints out child one do the bubble for our parent where it prints out parent one bubble for our grandparent and since we swapped this to a capture event there is no bubble phase so it skips it and then we do the bubble for our document which finally finishes this all off so this is how the capturing and bubbling system works and to really see in depth how it works what i want to do is just copy all of these events so we can have grand apparent capture and then we're going to have grandparent bubble which is just the default so i'm going to remove that and i'm just going to copy this down a couple times so we have all of them so we got the parent this is going to be parent capture parent here parent bubble then we're going to have our child and our child capture then we're going to do the bubble for our child right here so child bubble and then we can even finish this off by doing the document as well so we got document bubble and we each copy this you can get the document capture as our final one the document here document capture so now if i click on this child it's going to go document capture grandparent capture parent capture child capture and then it goes back down the tree with the bubbling so child bubble parent bubble grandparent bubble document bubble starts on the outside captures inward then goes from the inside and bubbles outward that's how these events work now this is all great that we have the capture and bubble phase but sometimes there are things that are going to happen that prevent the event from going through the entire capture and bubble phases and this is what happens when you stop the propagation of an event so let's say that when we get to the parent capture we want to stop all propagation we want to say you know what once the parent gets the event we want to stop and have nothing else get it so if we find our parent capture here we can take our event object which we called e and call the stop propagation method on it now when we click on the child you're going to notice it goes document capture grandparent capture and parent capture and then none of the other capture phases or bubble phases occur because what we did here is we stopped the propagation of our event which means it just immediately stops it doesn't do any more capturing or any more bubbling which is why we only get these three being printed out if we move this now instead into let's say our child bubble we just paste it in here you're going to notice it goes through the whole capture phase for all of our elements and then as soon as the child bubble happens it stops propagation and none of the other bubbling for the parent grandparent or document occur so we can use e dot stop propagation to stop our event from propagating upwards or downwards through the capture or bubble phase now i just want to clean this up a little bit we're going to get rid of our document events and we're going to get rid of all these capture events as well so we're just left with our original three events that we set up here so we have grandparent parent and child and when we click if we get rid of this stop propagation you can see we get child bubble parent bubble and grandparent bubble now another thing i want to talk about is a really common thing that you need to do with events and that's when you want to run an event once and never run it again you can use this third options parameter here inside of your ad event listener and you can pass it a property of once set that to true and this event will run one time and then remove itself immediately so if we click you can see we got child parent grandparent click again we just get child and grandparent because parent was set up to run only one time which is really useful if you need an event just to happen one time and we can click as many times as we want the parent is never going to show up here what happens if you maybe want an event to run three times or four times or five times or you want to stop it on your own and not just after one event well what you can do instead is use the dot remove event listener function this works just like the add event listener you pass it the type and function and will remove that function from your event listener so if we just come down here and create a function called print i and we just say console.log i make it capitalize there we go and when we do the parent here what we want to do instead is print i then we can remove that event listener at a later point so let's just say set timeout and this is just going to run some code after let's say two seconds so 2000 milliseconds we're going to do dot remove event listener on the click event and we want to remove that print high function so now if i run this and i click you can see it prints out high for our parent but if we wait you know two seconds and then click again you can see it has removed that event listener for us by using the parent.remove event listener and the reason i created a function separately for this is that if we wrote this code inline like this console.log i and we just copy this over to here remove this function down here you'll notice this doesn't actually work we can click a bunch of times it prints out high and now if we wait two seconds it's been about two seconds we click again it's still printing out high as you can see here and the reason for that is that this function and this function over here while they look identical are actually two different functions because you created two anonymous functions so they aren't the same which means remove event listener can't remove it because this event is technically a new event and it's different from the original event we added it to that's why if you want to use remove event listener you need to create a variable or function or something that is the same for both of the add and remove event listener now the very last thing that i want to talk about is going to be how you delegate events because this is really important when it comes to dynamically adding elements to your page let's just get rid of all that we're just going to select all of the divs on our page so document.queryselector all or our divs and each one of these elements is a div so it's just going to select all of our elements and then we just want to loop through our divs so we'll say for each div all we want to do is add an event listener oops not console log div dot add event listener on click and we just want to print out for example console.log i there we go now when we click on a div it's going to print out height if we click on one of the middle divs it's going to print high for each one of them that works just fine but now let's say that we want to create a new div so we're going to say new div is equal to document.createelement of div and then we're just going to append that to the end of our body so body dot append new div let's make sure we just give this div some styles so we can see it so new div dot style dot width equals 200 pixels new div dot style dot height equals 200 pixels and we'll just say new div dot background i'm sorry dot style dot background color we're just going to set this to purple so now you can see we have this new div over here and we click these divs they all print out high just like we expect when i click this div it doesn't print high the reason for that is that up here i selected all of the divs on my page i added event listeners to them and then after i did that i added a new div and then i you know put it on the page but this one wasn't selected up here because the selector was ran before i created this new div this is a problem a lot of people that are new to javascript and event listeners run into is they think that the new div will have the event listener but it actually doesn't because it was added after the event listeners were added we could come in here and say new div dot add event listener per click and you know we could come in and make sure that we console log high inside of here and now it'll work because we added the event listener after the fact this is kind of clunky and it's really a pain to do this so instead what i like to do is event delegation since you know that our events go through the bubble and capture phase we know that all of our events eventually end up on the document we could say document.addeventlistener for click and inside of here we can just console.log hi now what this is going to do is just log high every time we click on our page whether we click on one of our divs or if we click on our body or anywhere else so clearly it's not quite what we want because it works everywhere and we only want it to work when we click on a div so what we can do is take that event property called e we can get the target from it we can call a function called matches this just takes a css selector and if the target matches it it returns true so we could pass div as our selector here and then if this is true that means we've clicked on a div so let's log out hi and now when i click instead of a div you can see we get our high being logged out but when i click over outside of a div you notice no high is being printed but our new div will print out hi just like we wanted to so this is perfect and does exactly what we want i use this kind of code all the time which is why generally i like to turn this into a function i like to just call it add global event listener which takes in a type a selector and then a callback and inside of here i just like to add my event listener whoops add the event listener or the type i like to then have my callback here and inside of this what i do is i just say if e.target.matches oops matches selector then i call the callback with the event this right here does the exact same thing as what we have up here so i could just say add global event listener for click and i want it to match a div then i can just get rid of all this code and now if i run this we get the exact same thing when we click a div it prints out hi and anywhere else it doesn't and essentially all that i did is i just wrapped that code inside of a nice handy function which i can call anywhere which takes a selector i'm sorry a type a selector and then a callback for whenever we click on something that matches this selector super handy function i like to include it everywhere and that's all there is to event listeners in javascript if you enjoyed this video make sure to check out my complete javascript simplified course linked down below it covers literally everything you need to know about javascript and with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 170,157

Rating: 4.9675488 out of 5

Keywords: webdevsimplified, javascript events, js event, js events, javascript event, event listener, event listener js, event listener javascript, event loop, event loop js, event loop javascript, javascript event handler, js event handler, js event delegation, javascript event delgation, javascript event tutorial, js event tutorial, js event crash course, javascript event crash course, js event bubbling, javscript event bubbling, js event capture, javascript event capture, js, wds

Id: XF1_MlZ5l6M

Length: 18min 3sec (1083 seconds)

Published: Sat Dec 12 2020