FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.5 Listening for Events With the DOM API

This is one area where jQuery didn't influence the standards. In this lesson, you'll learn how to use the standard DOM event model for setting up event listeners and working with the event data that the browser gives us.

5.5 Listening for Events With the DOM API

A few lessons ago we talked about events and how to listen for them using jQuery. Well, in this lesson we are essentially going to do the same thing but we are going to use the standard DOM instead of jQuery. And the same ideas and concepts are going to be used here, so being able to pick this up is going to be very, very simple. So, in this lesson we're going to focus on the home link and we aren't going to listen for the click you've enter or anything easy like that instead, we are going to do something whenever the user moves their mouse over the home link. We're going to change it's text and then whenever the user moves their mouse off of that link we're going to change it back to home. So, we're going to listen for two events. The first is called the mouseover event. But before we can set up the event listener, we need to retrieve our home element object. So, let's create a variable called homeLink and we will use the getElementById method, you'll say home-link and we have our element object. So now we want to setup the event listener, and we do that with a method that is unfortunately not as short as on. It's called addEventListener. It is a lot more typing, but that is essentially what we are doing. We are setting up or adding an event listener, and then we specify the event that we are listening for. In this case, that is mouseover. And then, we have our function that is going to execute. So the same idea is in place here. We have our object, our element that we want to set an event listener for. We have the method that we're going to call. Whereas with jQuery it was called on. Here its called addEventListener. We have the events name and then the function that we want to execute. Now, we want to listen to two events. The mouseover and the mouseout event. So, we will need to send up another event listener for the mouseout event. Now, as far as mousing over is concerned that is when we are going to change the content of our link, instead of saying home we're going to say home is active, or something like that. But we need to be able to refer to the existing content as it is now, so we need to store that some place where we can then retrieve it within our mouseout event listener. And we can do that within the element object itself. So, the first thing we want to do is get the existing content, so let's create a variable called content and then we want to refer to our homeLink object. Well, we have that right here. We retrieved it using getElementById, so we could say homeLink and then innerHTML, and that would work. However, I advise against doing that. Because now our event handler or our event listener is tightly coupled with code outside of this event listener. So, if we change the name of homeLink, let's say that we decided to name it fooLink. We'd have to change it here, here, here, here and everywhere else that we use it. And that's not a good idea, this is brittle implementation because it can easily break. So instead, we can refer to the element that received the event inside of our function, and we do that with our event object. Now, whenever we talked about the events with jQuery we used the prevent default method. Now, we don't need to do that here because there is no default action for the mouse over event on a link. But, we can still use the event object to retrieve the element that received the event, and we do that with a property simply called target. So this is the target of the mouseover event and it is the same object as our homeLink is set. That now we are referring directly to our homeLink variable instead of our function. So, our code is much more stable here. So we have our elements, we have the content now let's create an attribute so that we can store that content and then we can retrieve it later. And so, we're going to say element we're going to call a method called setAttribute and this accepts two argument, the first is the name of the attribute that we want to create. So, we're going to call this data-content and we could be a little bit more specific but this is going to be fine. And then, we want to specify the value, that's our content. And then, we want to change the content of our elements so we're going to use our element object, we're going to set innerHTML and really we're just going to take the existing content and then say is active. And if we go to the browser, let's refresh the page. Whenever we move over the homeLink, we see that Home is active. But, whenever we move our mouse off, nothing happens. But, as we keep moving our mouse over and over, it keeps adding, is active, is active, is active. So, we definitely want to have that mouseout capability, as well. So the code for this is going to be essentially the same, we're going to get the target of the event, we're going to. Well we don't really need the content do we? Instead, we just need to retrieve the contents of this data content attribute. So, we'll keep our content variable but we will then say element and then we'll call a method called getAttribute, we want the data-content attribute and then we will say element.innerHTML= content. So whenever we go back, let's refresh, we move our mouse over the homeLink. We change the text is active, we move off, it goes back to home, and we have a working but simple link that changes content whenever we move over and off of that link. So, there's not a lot of differences between events in jQuery and the standard DOM. You retrieve the element that you want to addEventListener for, you call the appropriate method. For jQuery it's on for the standard DOM, it's addEventListener you specify the event. And then, the function that is going to execute and whenever that function executes you can get a lot of information about the event that occurred. You can get the element that received the event you can also get the type of event that occurred. And there is a lot of other things that we didnt talk about, because we could spend a lot of time with events. But if you remember from the previous lesson, Mozilla Developer Network is a valuable resource. Just do a search for MDN events and you'll have all the information that you need to know about events

Back to the top