In this video, we're going to have what I think is a little bit of fun learning a little bit more about events. Now there are a number of events and it can be difficult to know what events are even available. So first off, let me show you a website that I think is a decent event reference. This is W three c schools. And this references all of the DOM events. One thing to just keep in mind with this particular reference is that all of the events begin with the word on, which is the event you use when you're attaching in any event to the HTML attribute.

When you're using any vent listener with an event listener, you would remove the on so in this case, click instead of on click, but this is still a pretty good Reference. Now I want to show you a little webpage I created that just allows you to play with events and learn more about those events. These files are available for download with this course. So you can modify it and change it at events you want to look at and so forth. I call this the event reporter. Let me go ahead and refresh this so we can start from the beginning.

So, as you can see, things are being recorded in the middle of this page. As I move the mouse information is being recorded. You can see mouse move recorded at coordinates and it gives the coordinates and the event type it gives which is mouse move, and then the target object. You can see that target object changes as I move over different elements in the HTML page. This also records keystrokes so if I press some keys key was pressed, it gives me the key code, it also gives me the letter. And then the event type is key down, and the target is body.

And I also have another event I'm tracking, which is click, so I can click here gives me the target of h2. I click over here, the target is HTML. By clicking here, target is the div which contains all of these events. So mainly, I have four events that I'm looking at. Because when it first loads, it records the load event. Then whenever the mouse moves, it records information about that, and a click, and then also a key press on the keyboard.

Now I can scroll down and I can see all of those events. But as I move the mouse events keep happening so I may get enough free events reported that I want Take a look at them. So in that case, I can simply type Ctrl S and Ctrl S stop see events from recording. So now you can say move the mouse and nothing is recording. So I want to show you this JavaScript code that does all of this for you so that you can then go in and modify it and add some of your own events, you can test some of those events that are that can be found in the W three schools page I gave you. So I'm jumping to sublime.

First thing I've done in this JavaScript file is I've created an init function. And down here at the very bottom of the JavaScript file, I add an event listener to window and on the load event, I call that function. So nothing happens nothing is initialized until that init function is called First part of the net function, I declare some variables. This content is the div, where I'm placing all the information about each event. And you'll see what some of these other things do as I provide more information. I declare a function and reference it with a load info variable.

I'll come back and explain what that does. I have an add listeners function. Basically, this one adds listeners to the page, I have a remove event listeners. This removes listeners from a page. This is a command we haven't talked about, but I'll show you in just a second and a toggle event listeners. But the first thing that happens within this function is this right here, because all those functions are declared.

And then we simply call load info. I pass in a message document is loaded and I pass in the object, the event object to that function, so that it can extract some more information from the object. So let me show you that load info function. So all I do in there is I take this reference to the div and I do an insert adjacent HTML, which we've been doing and I do after begin. So it's inside of the div tag where I'm adding this. And after begin, we'll add it as the first line.

And what I'm adding there is the message and then I can catenate, some additional text event type. And I get the event type from the event object, this event object type. And then I also concatenate target object and I pulled out from the event object as well. And I get that by grabbing the target and then the node name of the target. And then I simply add a br tag to push it to the next line. So that mode info.

Now the next thing that executes is this toggle eventlistener. Toggle event listener checks to see checks a variable to see if listeners are enabled. When I first enable the listeners, I set that to true. If it's true, then it calls remove listeners. If it's false, it calls add listener. So that Ctrl S that I did will both add listeners and remove listeners.

Listeners are automatically added when we initialize because toggle event listener is called, and this is set to false, this variable here, so listeners automatically get added, then I do the Ctrl S, it removes them. If I do the Ctrl S again, it will add them again. So let's take a look at the Add listeners function up here. This is the one that you may want to change to take a look at additional events. First, the way I've done it is I've declared functions outside of the Add event listener. So I did not use an anonymous function, but I declared them outside.

The reason I did that is so that I could use remove event listener to remove the events. If it had been an anonymous function, I wouldn't have been able to do that. So this three lines of code are used to deal with the key down handler. So when a key is pressed, so I first define the function, it calls load info, it passes this message a key was pressed, it passes the key code, and it passes also key which is the letter and then it passes the event object so that load info can do more with it. And you can see I placed e as variable to grab the event object here. Now following that call to load info, I then have a simple if conditional, I checked to see if the key code is 83.

That happens to be the letter S. And if control key of the event object is true, that means the control key is being held, is being pressed. And if that's the case, I toggle eventlistener. So I call that same function to toggle event listeners, it'll either remove them or add them. Then here's where I add the event listener to the document object. key down is the event. key down handler is that function there.

Then I have a listeners array declared and I push to that array, the function and the event I need both of pieces of information to be able to remove the listener and I'm using this listeners array to keep track of those so that I can then remove them when I need to. Here's the next event. This is a simple onClick handler, I simply call load info with this message, and I pass in the event object, then I add the event listener. And then I push that information onto the listeners array. mouse move is a little bit more involved. For this function.

I keep track of the last event object. That's the first thing I do. Before I explain the details of this code. Let me explain what I'm doing here. mouse move would be constantly sending messages to that div tag, and I would have so many messages coming. It would be a little bit difficult to handle.

So what I've decided to do is I limit a mousemove event to every half second, I don't let it send one more frequently than that. So let me explain how I do that. So first, I record the event object. The last The event object because I want to keep track of the actual event object for the mouse move that I am going to record, then I have a variable there if the variable is true, that means I'm going to print the information about this particular event. So if it's true, I'm going to do it, I immediately set the defaults, so that it won't do it again. It won't do it right.

The next mouse move event will not cause this to happen because print is set to false. Then I call the load info, I pass in this message. I pass in a couple of pieces of information from the event object mate, basically the coordinates of the mouse page x and page y. And then I pass in the event object so it can do some more with it. Then I call set timeout. You probably remember set timeout timeout.

It allows us to enter a callback. This is a callback. All event listeners have callbacks as well. So this could be considered a callback to. But I did it as an anonymous function. And I set it for a half a second, when a half second expires, it calls that and it simply changes print it to true.

So then this variable is now true again. So the next mouse move event will record, add event listener to the document, and then push that information onto the array. Now down here, I have some commented JavaScript. This is just a structure you can use to add your own events if you want inside of square braces. Identify the information that needs to be changed. So the variable name that will store the function and the event that you want to listen for.

So you can use that page in w three c schools, to look at different events and you Try them out and see what type of information you get from them. Finally, the last thing I need to talk about is remove event listeners. As I mentioned, this contains a new method right here, remove event listener. Now I just put it inside of a while loop, because I want to go through everything in the array. So while the array arrays length is greater than zero, I keep going. And inside the room removing that listener, I have to pass in two pieces of information after passing the event.

Similar to add eventlistener, the same two pieces of information. So here's an event listener, event and the function. So the first pop statement of the array will pop off the event. The second one will pop off the function and so that removes too From the listeners array, we go through the while loop again or it moves to more we go through the while loop again, root moves to more and it keeps doing that until it's removed all of the event listeners, so there's nothing left in the array. So just a fun little page to learn a little bit more about events. And as mentioned, this has been provided for you, so you can modify it and try some other events that you'd like to learn more about.

Let's move on to that exercise.