6.5 Listening for Events

Events are probably the most important part of JavaScript development, because they allow us to react to the user. And even though we don't really see it, most everything that the user does causes an event. So if they click on anything in the page that causes an event, if they type, if they scroll, if they're on a mobile device and they tap, all of those things are events. And the great thing is we can write our own code and hook into that functionality, so that whenever the user clicks, or types or does practically anything, we can execute our own code. So in this lesson, we are going to set up a click event for our message elements, so that whenever we click on it, we are going to toggle the ugly text class. So that's going to be practically useless but this is going to introduce you to events which is half of the battle. So the first thing we need is the object that we want to set up the event on. And we have that, that is our messageElement. The next thing we have is a method called addEventListener. It's a mouthful to say, it's also a finger full to type. But we are setting up what's called an event listener that's going to listen for a particular event and we get to specify what event that is. So if the user clicks on our message element, well, that's what we want to listen for. And then we want to execute some code. Now, we learned a couple of lessons ago about a callback function, it's a function that we pass to another function so that it can call it, that's kind of weird to say. And we essentially need to do the same thing here, we need to write a function that will toggle the ugly text or we might want to do it like this messageClick, now, something to indicate that this is handling the click event on our messageElement. And all we really want to do here is toggle that ugly class. So we'll use our class list, we'll call the toggle method and then pass in ugly-text, so there we go. But that's not all, we need to take this messageClick function and we need to pass it to the event listener. Now once again, notice that we are just using the name of the function, we are not executing that function because, well, that's wrong, that's going to result in our code not working. So let's revise, on our messageElement, we are adding an event listener for the click event and we are going to execute our messageClick function whenever that event occurs. So let's click on the div, and we can see that we are indeed toggling the ugly text class. It's not changing the bold, in fact, if we go ahead and inspect this, notice down here for this div element. Watch that as I click, well, let's do something a little bit more involved. Instead of setting up the clickEventListener on our messageElement, let's do so on the individual span elements. So the first thing we need to do is get all of those span elements. So we will use querySelectorAll, our CSS query is the ID of message and then span. And then that will give us all of those span elements. And the next thing we want to do is set up the clickEventListener on every one of those span elements. And the only way to do that is to use the forEach, well, it's not the only way, but it's the way that we know because for each span element, we need to set up that event listener. Now, I'm going to do something a little bit different here. I'm going to do what's called inlining of function. The reason why it's called that is because it is in line with the rest of the code. And the technical term for this function is an anonymous function because it doesn't have a name, but it is still a function and we are still passing it to for each. The reason why I'm using this style here is because you will see this in probably 95% of all of the code on the Internet. This is just the style that everybody uses. It is technically not the same thing as defining the separate function calling it process span or better yet set up click but it is functionally the same. So we are creating an anonymous function for the forEach method, and we need the element that we're going to be working with. And then we want to set up the click event listener, so we're going to call addEventListener. We want to listen for the click event and then we want to specify a function. Now, I am not going to use an anonymous function here because I want you to learn about something else. So we are going to write a function called clickSpan. And we need to be able to toggle the ugly-text class on the span element. Now, one very important thing here, is that we don't have access to that span element, at least inside of this clickSpan function. We do down here when we are inside of the forEach callback, and we could get away with using that if we used an anonymous function down here, I don't want to do that. The reason is because whenever you set up an event listener and that event fires and it calls our callback function, it passes a special event object to that callback function. We typically just refer to that as e, and this event object has all of the information that occurred about the event. So for every event there is a type property that will tell us the type of event that occurred. Now, that might not seem very useful because we know that this is a click event. But I guarantee you there are times when you don't know the type of event that occurred and you need to. Now, if this event was caused by somebody typing on the keyboard, it would have the information about the keys that were typed. If the event occurred because the mouse was moving over certain elements or across the screen, it would contain the information about the mouse coordinates. But in our particular case, what we want is the element that received the click event, it is the target of the event. And we can get that using the target property. Every event has a target, so no matter what type of event occurs, you can always get the element that received that event. So now that we have the target of the event, we can use the classList and we can toggle the ugly-text class. So with that in place, let's comment out everything else, because we want to focus just on what we have for our span elements. So this means that our starting text is just normal text, there's no styling applied at all. But whenever we click on the individual span elements, we can see that the ugly-text class is applied to it. So there are essentially three things that you need to remember from this lesson. The first is that almost everything the user does results in some kind of event, be it clicking, be it moving the mouse around, be typing, tapping, scrolling, it doesn't matter. Whatever the user does, there is an event that occurs. The second thing is that you can listen for those events. And you can handle those events by executing your own code. You have to set up an event listener to do that. Specify the event that you want to listen for, and the code or the function that you want to execute when that occurs. The third thing that you need to remember is that every event listener receives the event object and that event object has all of the information about the event that occurred. There are a ton of events that can occur and I will add a list of them in the description for this lesson.