Practice JavaScript and Learn: Events

2.3 Assigning Events With JavaScript

In the previous lesson, you learned about the event object and how it provides a lot of information about the event. And while we didn't really look at a lot of that information, we did look at two very important pieces. The first is the target property, which gives us the element object that received the event, and then we looked at the type property, which tells us what type of event occurred. Now the latter is very useful when you use a single function for handling multiple events, which is what we have done. We have a single function for handling the click event, the mouseover, and the mouseout events. And while there are developers that take that approach, I mean, I have certainly done this in the past. It really only makes sense to do so when, well, it makes sense to do so when there's some relationship between the functionality of those events. And in this particular case, I would say that there really isn't. Whenever we click on one of these div elements, we are essentially activating that, I'm going to call it a button, we are activating that button. And that really has nothing to do with whenever we move our mouse over or out of that event. Those are more for changing the style so that it's a visual cue that says, hey, there's something here that you can click or that you can activate. So if I was writing this in a real application, I would divide this into two functions. The first would be, of course, the activateButton. But the second would be for handling the MouseMovement events, because that is what the mouseover and the mouseout events are. They are for when the mouse moves. So inside of this function, we would essentially start off the same way. We would retrieve the event target so that we can manipulate its style, and then we would just test to see what type of event occurred, and then make the appropriate changes. And in this case, I would get rid of this else if, because we are already checking to see if we have mouseover. And if we do have mouseover, then the only other option is going to be mouseout. Because the only time that we will use this buttonMouseMovement event is to handle the mouseover or mouseout events. So this is going to clean up the activateButton function so that it is only for, well, when the button's activated, and then the MouseMovement is only for mouseover or mouseout. So with that change, we just have to go to our markup and change the values for onmouseover and onmouseout. And if you're thinking, well, that's tedious, I would be inclined to agree with you. And it's very error prone, because we are human. And the more changes that we have to make, the more likelihood we're going to screw something up. So surely there's another way that we can do this, one that's going to take the error out of it, and there is. We can can set these events through JavaScript. Now let me first of all say that this approach, using HTML attributes, does have its merits. It is declarative, so that as you are looking at the HTML, you can explicitly see what is going on. We can see that when we click, this is going to happen. When we move our mouse over or out, this is going to happen. Whereas, whenever we set our events throughJavaScript, that clarity kind of goes away. There still is some clarity, but it's not as clear as having it right up here in the HTML. And I should also point out that all of the modern UI frameworks take this declarative approach anytime that you set up an event in Vue or React or Svelte. You typically do that through markup. So we've kinda come full circle in that we started with this approach, then we started to get away from that because of the headaches that it can cause, and now we're back to it. So lets do this through JavaScript. The first thing that we need are these div element objects, so that we can access them and we could set the appropriate events. And we can do that very easily by using the querySelectorAll method. So let's just create a variable called elements we will call document.get, or querySelectorAll, and then we will pass in a selector. So we want to select these div elements with a class of tab-button, but I'm also going to specify the parent. So we'll start with the parents, and we will also include the class here. I'm just wanting to be absolutely explicit in the elements that I want to retrieve here, and then the children. So we are selecting all of the div elements that have a class of tab-button that are inside of a div element with a class of tab-buttons. It's kind of overkill, especially for this example, but there we go. So once we have those elements, we just need to loop over them and then set the appropriate events. Now we can do this with the forEach method. However, that's not always going to work in every browser, because elements is a NodeList and technically NodeLists do not have a forEach method. Now some browsers will go ahead and execute that code for us. For other browsers, we have to jump through hoops. I'm just going to write code that's going to work in every browser, and that is a simple for loop. So I'm going to start with the counter variable, I'm gonna call it ii. This is just a neat little trick that I was taught, in that if you ever needed to search for your counter variable, if it's unique you will find it a lot easier. I know the convention is to just use i, but if you do a search for i, how many uses of i are there inside of this HTML file? There's a lot. So if we have a unique counter variable, then it makes it a lot easier to find. And we're going to iterate for as many inside of our elements NodeList, and then, of course, we want to increment our counter. So there is our for loop, and let's create a variable called element. And we will set that equal to elements at the index. So this is going to give us each individual div element, then we just need to set our events. So we do that with a property that pretty much directly maps to the onclick, onmouseover, and onmouseout attributes, and the property names are the same names as the attributes. But what we set here is actually a function, because these properties, this onclick and onmouseover and onmouseout, those are functions themselves. So every time that we click on one of these elements, it's like we are executing onclick. So when it comes to setting these up, we want to take the function object itself, activateButton, and then assign that to onclick, just like that. We do not want to execute it. Because that is going to execute activateButton, and it's going to assign the return value of that function to onclick. Well, we're not returning anything, are we? So that's going to be undefined, and onclick isn't going to work. So one very important thing, that whenever you are referencing the function object itself, you use the name of the function without the parentheses. You're not executing it. You're just referring to that function object. So then we just need to set up the event handlers for onmouseover and onmouseout, and we are going to end up with the same result. Now you might be thinking, okay, well, how do we pass events to these functions? Well, we don't have to worry about that. That's going to be automatically done for us. So if we get rid of these HTML attributes, so that all we have is the class and then the text. We can go to the browser, we can hover over these elements, we can see that our mouseout and mouseover are still working. If we click on any one of these, we can see that we have the same functionality, you clicked the edit button. So now it doesn't matter how many of these buttons we have. Anytime we add a new tab-button to our HTML, as long as it has the class tab-button and it has some text that we can work with, which in this case let's have Selection. And if we go to the browser, Selection is automatically added and we see that we have the same functionality. Now this is great. The ability to set our set our event handlers through JavaScript, it does add a lot of flexibility. However, it's not without some caveats. And we will look at what those are in the next lesson.