Practice JavaScript and Learn: Events

2.4 Using the Standard DOM Event API

In the previous lesson, you learned about event handler properties and how you can use them to set up your events using nothing but JavaScript code. So we retrieved the elements that we wanted to set up, we iterated over them. And then we assigned the onclick, onmouseover, and onmouseout properties, and we set those to the appropriate functions. And everything was great, we could easily add in a new tab, and everything would be fine. It would work as long as that tab had a tab-button class and it had some text to work with. So we gained to some flexibility there, but we also lost some flexibility. Because, if you remember, the HTML attributes allows us to execute any JavaScript, any value inside of these attributes is treated as JavaScript. So then that means that we can call activateButton, passing in event, of course. But if we wanted to execute something else, well, all we have to do is just create a new statement. So we end our first statement with a semi colon, and then we write our second statement, console.log. So we can say that User clicked tab. Now, in order to make this work, we are going to have to comment out line 25 here, where we set up onclick. But let's go to the browser, let's click on File. We have our alert box with our message, and then we have our message in the console. But if we set up onclick through JavaScript, well, we're going to get different functionality. If we click on File, we will have our alert box, but nothing in the console. And the reason is because we have changed the value of onclick. We aren't adding anything new to onclick. We are essentially overriding what was already set for onclick with activateButton. So we are saying that for onclick, you will call activateButton and only activateButton. But let's do this, let's write another function called writeConsole. We will accept the event object, we will get to the event target. And then let's just write the text of that element, so we will say target and then innerText here. So we have slightly different functionality, and we want to include this. So let's, first of all, try it by retrieving the first div element in our elements list. We will say onclick = writeConsole. If we go to the browser and click on File, if you guessed that we are going to just see the message in the console, then you are correct. You don't win anything, but you are correct. And we don't have our alert box. And the reason is, once again, by assigning a value to onclick we have overwritten what was originally there. And so now we are saying that for the onclick event for the first element, we want you to execute and only execute writeConsole. So of course, the way that we used to get around this was to simply write another function, one that was going to call everything that we wanted. So that could be with an anonymous function, something like that. We would, of course, need to get e so that we could pass it on through to activateButton and then the writeConsole. And this is what we had to do for a while. But then one of the DOM specifications included an event model. And there is a whole history that I can go into, but it's irrelevant now. All we have to do to execute multiple functions for the same event on the same element is to use the standard DOM event listeners. So to do that, we still use our element object. But instead of saying onclick, we call a method called addEventListener. This is a standard method that accepts the name of the event that we want to listen for, click. Now, notice it doesn't have onclick. The name of the event is just a simple name, click, or mouseover, or mouseout. And then the second argument is the function that we want to execute, so that would be activateButton. The event object is still going to automatically be passed to that function, so we son't have to worry about that. But once again, note that I'm using the function object itself, I'm not executing that. The browser will execute that whenever the event occurs. Right now, I'm just setting up the event using the function object. But then we also want to write to the console here. So let's comment out where we used the onclick property, and instead we are using addEventListener. And we have specified two listeners for the click event. One is going to specify the alert, the other is going to write to the console. So if we go back to the browser and click on any one of these, we will see the alert, we will see, well, we left the onclick attributes for file. So we're going to see extra stuff here, and don't worry about error. So let's go back, and notice that we didn't overwrite onclick because we didn't specify anything for that property. So whatever was inside of onclick Is still there. But let's get rid of that so that we don't confuse ourselves. And we will go back to the browser, let's click on File, we have our alert, we have our message in the console. If we click on Edit, we see the same thing. Selection and Help, all have the same functionality. So now not only do we have the flexibility that we had before, by automatically setting up our events using JavaScript, we can also set up multiple listeners for the same event for the same element. Now, the question becomes then, for onmouseover or onmouseout, we have a single function that we want to execute, do we have to call addEventListener? No, you don't. However, it is very brittle. Because as you've seen, all it takes is an assignment to onmouseover and/or onmouseout, and then your code breaks. So for the sake of stability, I would say yes, you need to use addEventListener if you're going to set up your events using JavaScript. So in this case, we would have mouseover, so let's go ahead and have that. And then we would call buttonmouseMovement, and then we would do the same thing for mouseout. But of course, we want to comment out the onmouseover and onmouseout property assignments there. So now if we go back, we are still going to see the same functionality, we're just using standard code.