Practice JavaScript and Learn: Events

2.2 The Event Object

Whenever an event occurs in the browser, a special object is created that contains all of the information about that event. We call it the event object. And it allows us to do a lot of really cool things when an event occurs. Like for example, whenever we click on the File, Edit or help text, we see a message. Now, we know that this text is actually contained within their own div elements. And we know that whenever we click on those div elements, you'll always see the message and the alert box. And the reason why we know that is because, hello, we wrote it. But what if we wanted to work with these div elements? Like for example, if we click on File, then we could get access to that div element object and we can manipulate its style however we needed to. So if we want to highlight it, or just make the text bold, we could do that, because the event object gives us that information. So what I want to do in this lesson is change our code. Because if you'll notice in our HTML, we have the text of our buttons, File, Edit and Help. But then we have essentially the same information. But this time we are passing that to the activateButton function. What I would like to do is, first of all be lazy, and not have to replicate this. So that whenever we click on File, Edit or Help, we can use that event object to get the element that was clicked, we can get the text inside of that element and then we can use that text in our output. Now that sounds like a lot of work, but really it's not because we are being lazy and we are relying upon the text that we have already included into our HTML. So the first thing we need to do is change the data that we are passing to the activateButton function. Instead of passing in a string value of file edit or help we're gonna pass in an object called event. Now this is something that is very specific to the HTML attribute events. Because the browser isn't going to automatically pass this event object to our functions inside of our attribute events. Just because it doesn't know to. So we are telling it, we have this function activateButton pass that even tobject, so that we can work with it within our function. And that's what we are all doing. So as far as our activateButton function is concerned, I'm going to change the parameter to e. Now, you can call it event, if you want. But the convention is to just call it e, and it's just short for event object. And there are a ton of properties on this event object. One of them is type. So if we wanted to determine what type of event occurred, we could do that. And you might think, well, why would I want to do that? Well, let's look at this. Let's add another event attribute here. We're gonna say on mouse over, and we're going to set that to activate button. Now, in this particular case, this isn't the best use of this. But there are some times when you will have multiple events and you will use the same function to handle those events. And in those cases, it's very useful to know what type of event occurred. So if we check to see the type, and if it is a click event, then we want to display the click message. You clicked on the button text, but of course we need to get the button text. So we can get that with another property called target. It is the target of the event, so it's pretty easy to remember. So what I typically do is I create a variable called target, that is a direct assignment of the target property, and then that gives me easy access to that element object. So if we click on the development for file then the target property is going to be that Div elements and then once we have that object, we can do whatever we want with it. So in this particular case, we will just get its text which is file. So we don't have to hard code file into where else it can just be inside of our HTML. And we will use the innerText property to get that value. And so now, whenever we go back to the browser, if we click on File, we can see that you clicked the File button. Now notice that File is now in uppercase. This is to prove that we are indeed doing what we intended to do. If we click on the Edit, we'll see the same thing. We have Edit in uppercase. So in both of these cases and in the case of help, we are pulling the text from the actual div element itself. And we are outputting that in our message. Now, if we wanted to replicate the same functionality that we had, we could just call toLowerCase. And that would give us our text in all lowercase. So once again, if we click, then we have, you clicked the File button. But also, if we wanted to do something with the on mouseover, well, let's do this, and we'll check the type. If the type is equal to mouseover, then let's do something such as let's change the style color to white. And then we'll change the background color to blue. That way we'll know without a doubt. So if we click on Help, we see the same information, but notice that nothing happens whenever we mouse over it. That's because we didn't set up that event handler. The same thing is true for Edit, but the moment that we mouse over File we can see that the style changes. And of course, if we click on it, then we get the text that we would expect. Now, we want to be able to reset the style of file whenever we move our mouse off of that element. So we can use the onmouseout event. We'll call activateButton. We'll pass in event and we will add an else if here. If the type is equal to mouseout then we will reset those style values. And all we have to do Is just set them to an empty string, that will reset those values. And then we can go back, we hover over, we see the style change, we move our mouse out, and it goes back to normal. Now one thing I do want to point out is the types of events here. We can see that the names of these events match up with what we have specified in the HTML attribute, except they do not have on. That's because, well, that's just because. The type of event is the actual name of the event without on, so click, and mouseover, and mouseout. And so now we can copy and paste the mouseover and mouseout event for the Edit and Help. And now we will have a more functional set of tabs.