Event Object

[00:00:00]
>> So this is how we now can handle click events that come at us. And we can do whatever we want in these handler functions. So for example this is a very, very exciting web page I have embedded here in my slides. It has a button. Now not a lot happens if I click elsewhere on the page, but if I click on the button, this text escapes the box.

[00:00:24]
And then it goes back in, and then it escapes, and then it goes back in. This is not a very exciting or particularly useful example. But it just goes to show that we can do whatever we want to the webpage. The handler function is just a JavaScript function, it can do whatever we need it to do.

[00:00:43]
We can we can modify parts of the page. So any guesses what this is, what's going on here? We can take a look. So this is, I'm looking at a code pen here, which is a nice little sandbox site, you could say. A little place where you can, sort of like a playground.

[00:00:59]
Codepen.io you can play with snippets of HTML and CSS, and JavaScript. So right here, I've got some basic elements in my page here. I have a box class div that has some text in it. And then I have some text outside of it, which also has a class applied, called hidden.

[00:01:21]
So any guess what is happening when in my handler function, that you haven't seen yet. You don't know what I wrote in this handler function, but any guesses?
>> An event listener with a click and then instead of console log, it executes a different function to do that.

[00:01:42]
>> Yep, yep exactly, it's not console logging, it's doing something else. And in this case what it's doing, I have a little hidden class In my CSS. And what it's doing, is it's changing which element that hidden class is applied to. So let's take a look at the code.

[00:02:01]
So here we've got a button that I'm capturing with my document, get element by ID. We've seen that lots of times now. I'm capturing also some paragraphs with my query selector all, to get all of the p elements. And I have a couple of them. And basically every time this button is clicked, that's where I'm attaching the event listener.

[00:02:18]
Is on the button element, not on the whole document like we saw a minute ago. I'm listening for that click event. And whenever that click event happens, I'm calling this function, that is doing something we'll see a little bit later. A for loop over all of the paragraphs and toggling whether or not they are hidden.

[00:02:39]
So if they have a class hidden, it's taking away that class, and if they don't, it's adding that class. And what it effectively does, is switch which one I can see. So this is just an example of the arbitrary things we can do in our handler functions. Now, if you were looking really closely, you might have noticed that there was a parameter in the arrow function that I had in that last example.

[00:03:03]
Unlike in the first example. And so there is an option, you have the option, to get some more information about what happened in this event. In this case the click event. JavaScript every time it calls your handler function, which it's gonna do automatically because you attach that event listener.

[00:03:25]
So every time it calls that handler function, it's gonna pass in an event object. And that event object has some details about exactly what happened. So, remember how we said earlier that JavaScript doesn't really care? It's pretty loosely goosey about whether you pass in the right number of arguments or not.

[00:03:47]
So it's gonna be passing in this event, our argument, this event object, every time we call that handler function. We may or may not care about it. If we do care about it ,we can sort of capture it by making that event or often you'll see E as abbreviation.

[00:04:06]
A parameter of our handler function, and then we can find out more about what exactly happened on the page. So let's take a look at an example. So now I have, I'm gonna add a new event listener. And here's the thing. You can have multiple listeners for the same event on the same element.

[00:04:29]
So in this case, I'm going to add another listener to the document. That's also listening for click events. This time, we're going to take in that event that JavaScript is going to try to give us. We're going to actually capture it this time as a parameter to our handler function.

[00:04:43]
And then we're going to log the event object itself. So let's check it out. Let's see what happens now if I click on the page. Aha, so I still have my old console.log clicked. Because I that event listener is still attached. But now I have a new one, where I'm seeing this click object has some parameters.

[00:05:02]
A target, and a client x, and a client y, and a whole bunch of other stuff. But essentially, we're gonna be able to from this object, drill into the event details. And get out any relevant information. For example, maybe I want to know exactly where on the page the person clicked.

[00:05:27]
Or were in element, that's that client x, client y, that's telling me the location of their pointer when they clicked. And target is going to end up being a super useful property. So let me click around a little bit. Take a look at the what the console is saying about the target property on this object.

[00:05:47]
And think about what do you what do you think that target is? So, I'm clicking on the title here, clicking on this div where we had put the statement that may or may not be true. I'm clicking on, This, the explanation text here. So any guess what event target is?

[00:06:20]
>> Where it was clicked?
>> So where in what sense? Cuz for example, we saw that client X and client Y are kind of where in the view port. Where in the window. So where In the sense of
>> What element?
>> Which element, exactly, which element was clicked here.

[00:06:39]
Nice, exactly. So this is essentially the element where whatever event we're listening for, fired. And so if we wanna just log that for example or just look at that and we don't really care about the rest of the event. That is also something handy. We're gonna see that come up a little bit later.

[00:07:00]
So this is where we can see where in the DOM tree essentially this event happened. And that's gonna come in super useful. So click is the event that we've been listening for so far. But it is by no means the only event we can listen for. There are all kinds of other things that the browser notices what people do.

[00:07:26]
So for example, double click, which for whatever reason, they didn't spell out the double. It's just the dblclick, is the name of a double click event. There are also events that don't even involve clicking. Any guess what mouseove and mouseout kind of represent? If I mouse over an element and mouseout of an element, any guess what that is?

[00:07:52]
>> Where the cursor is on the screen?
>> Yeah, where the cursor is on the screen. So essentially when I mouse over and then mouse out of an element, it's sort of like a hover, sort of like hovering over an element. So if you've ever, you've seen on webpages where something cool happens when you hover over a part of that.

[00:08:09]
That might be powered by listening for mouseover and mouseout of it. Yeah, question.
>> Chat, someone said focus.
>> Focus is another event, exactly. So for example, if you're clicking or maybe even tabbing through different elements to highlight them, or focus them. Like when you tab through a bunch of buttons and it shows a little outline, that sort of thing.

[00:08:32]
So there are a ton of different events that the browser knows about. And that we can then choose to listen for and then handle. So guess where you can read all about them?
>> MDN.
>> MDN, exactly. So we can [LAUGH] take a look at, if I go to my good friend MDN and look for events.

[00:08:54]
There is a whole bunch of information and we can even see kind of all of these different things that event objects can do. And we have some guides, also on MDN about working with event listeners. And the data that they give us, and all kinds of good stuff.

[00:09:15]
So if you want a whole, whole bunch of overwhelming list of events, you can search for this event reference. And find all these different types of events. There's all kinds of things going on here. And this is just a categories of events, we haven't even gotten to the list yet.

[00:09:32]
Look how many things, my god this page is so long. So long, so long, so long. So we're obviously not going to have time to go through all of these. Essentially, we're going to be most concerned about clicks for our page,because we want people to be able to click on these buttons.

[00:09:48]
Cool. Suffice it to say, though, you can handle all kinds of stuff with the same event handler structure.