Removing an event
- Next steps
Viewers: in countries Watching now:
- Understanding event registration and propagation
- Analyzing event properties
- Creating and removing DOM elements with events
- Removing an event
- Canceling and preventing default events
- Playing media events
- Handling media pauses
- Dragging and dropping
- Adding touch events
Removing an event
I am going to add the event listener, now this time I am going to add the event listener inside this event listener. So this new event is only going to happen when a mouse over happens, so let's go ahead and do that and we'll put it right here and we will say, e.target.add event listener, and this time we're going to look for a mouse out event. And then we want to do a function right here. Now this time we're going to name this function. We're going to call it handler. And that'll be important in a minute, when we want to get rid of this new mouseout event.
I'll show you how that works in a minute. So I'm going to open up curly brackets here, and make sure I put a semicolon. Make sure I pass a false so this bubble properly. And here's what I want to do when I mouseout out of one of those thumbnails. First I need to get the element that I want to delete. So I'm going to say var the node that I want, so I'm going to say myNode. And this is going to be equal to the target parent node. And I named this event d so I want to make sure that I pass it along, d target parentNode.
And then I'm going to do a query selector to select the element that I want. What I want to get rid of is the div with the class of preview that I create. Okay and then what I want to do is remove that node so I'm going to say my node and again when I remove something I have to look for the period of that element so I just say my node.parentNode and then remove child mynode, so this is what I want removed. So let me go and save this and let's see if it that works.
Refresh this page, and when I roll over this images, only the image shows and everything looks pretty good. But there's actually a problem with this. You're not going to be able to tell, there's 19 errors happening. Let's click on those and see what they are, let's go ahead and close this. Actually, let me just go to the console itself because it'll show you something happening here. It says cannot read property of parentNode of null, let's see, let's take a look at the Elements panel, and take a look at our art on ordered list, list item and let's roll over this list item and see what's happening.
So, when is this error happening? When I roll over one of these images and I roll out. Notice that there's a lot of Errors happening. And there's actually, you can see that, the errors seem to be increasing exponentially. Let me refresh the page and I'll show this to you. So if I roll over here one time and I roll out, it won't have an error. If I roll out over it again, I get an error. And then if I do it again, roll over roll out, now I get three errors. So, what's going on? They seem to be increasing. Exponentially. What's happening here is that some of the events are still being called so what's happening is I get a mouseout event, and then the second time I roll over and I roll out, I'm getting two mouse out events.
So here's how we're going to fix that, back into our code, so what we want to do here is remove the element, now I can use e.target or the word this if I want to, and say remove. The event listener, and I have to tell it what I want to remove, in this case it's going to be mouseout, and then I'm going to call the function that I created, remember I gave it a name earlier, and I didn't give this one a name, this one doesn't need one because the mouse over event doesn't need to be removed in this case.
So, we're just going to say mouseout and then call the function we created, handler. Then give it a false Boolean here, which is just going to match the same Boolean we specified down here to make sure that the event bubble properly. So all the things about the event have to match. The first part lets the function know which event you want to target so this has to match perfectly. We want to target the event that's created by this mouse over, and that's what we did to create the function right here.
If you didn't get rid of that element it would eventually generate some problems with memory that you may have not known but your users might definitely feel whenever a browser crashes because there's too many events in the queue.