Okay then, my friend.
So we've seen now how to react to click events and we've seen all about event bubbling and event delegation.
And we even made that very simple to do list.
We will be making a much better one later, but at least now we've got the basics under wraps.
Now there's many other different types of events that we can listen to.
So we'll do a few examples in this video.
So first of all, take a look at this code.
I've already created a very simple bit of HTML.
We have a P tag right here at the top with a class of copy me.
Then we have a div with a class of box with this text and then we have a load of other p tags down here
as well.
Now up in the head we also have a little style for the box, which is this div right here that just
gives it a width and a height of 200 pixels, a margin of ten pixels.
Top and bottom background color of light gray aligns the text in the center and a padding of 20 pixels
all the way around.
So if I save this and preview in a browser, it looks something like this.
So we're going to look at a few different types of events.
The first event we're going to look at is a copy event, and that happens when we select something right
click and go to copy.
So that is its own event in JavaScript and we can react to someone doing that on our web page.
So that's what we're going to do.
First of all, I'm going to grab this element from our JavaScript.
So I'll say const and we'll call this copy and set it equal to documents, dot query selector, and
then we want the element with a class of copy hyphen.
Me That was the class we gave it right here.
You see?
Copy me.
Okay, so we have a reference to that.
Now we need to add an event listener so we'll say copy dot, add event Listener There we go.
And we want the copy event.
So this is listening for that event that we just demonstrated where we right click and copy.
And when that happens on this P tag right here on this sentence, then it's going to fire this callback
function that we're going to pass it.
Now we don't need the event, so I'll just do a regular arrow function with parentheses.
And inside here I'm just going to log a message to the console and we'll say something like hi, and
then say my content is copyright like that.
Okay, so now if we save this, it should work.
So if we right click then go to copy and we can see right here my content is copyright.
So just a little deterrent to stop people trying to steal your content.
The next one we're going to look at is a mouse move event and that's what we've got this box for right
here.
So what I'd like to do is move my mouse around this box and then we're going to react to that event
of the mouse moving in this box.
Every time it moves.
What I'm going to do is log out the X position of the mouse inside the box and the Y position.
So then let's first of all get a reference to the box.
We'll say const box is going to be equal to documents, dot query selector, and then grab the box class.
So it's dot box.
I think that was the class we gave it.
Yep.
Box.
And now we have a reference to that so we can add an event listener to it.
So I'll grab the box, add an event listener, and then inside that we want to listen now to a mouse
move event.
So every time the mouse moves inside this box, then it's going to fire this callback function.
Now I do want to use the event object inside here, so I'm going to pass it in as a parameter.
Remember, we don't need parentheses when we use one parameter inside the arrow function and inside
here.
Now what do we want to do?
Well, first of all, all we're going to do is console, dot, log the event object just to see when
this happens.
So let's go and move around this box and notice it's doing it a shed load of times.
Every time we move a little bit inside the box, it's firing the callback function and we see the event
object logged to the console.
Now we want some of the information inside that event object.
So if we come down to, oh, we can see the offset X and the offset Y.
Now the offset X is the position in pixels of the mouse cursor from the left side of the container of
the box.
The offset y is the position in pixels from the top of the box.
So what we're going to do is output these little coordinates inside the box.
Now to do that, first of all, I'm going to just log those things to the console.
Let me comment this one out and instead we'll say E dot offset X and we also want E dot offset y just
so we can see those values as we move around.
Now, if I start at the top left, it should be almost zero and zero.
We can see, yep, we get zero undefined and zero.
So that.
It's not work.
That's because we've spelt this incorrectly offset X, save that and move it to the top and we can see,
yep, they're pretty small numbers because we're near the top left.
The more we move to the right, the bigger the x coordinate is going to get.
So you can see it's like 41 now all the way to the right where we get 230 something.
Now if we move further away from the top, then the y coordinate is going to get bigger all the way
to the bottom, right?
So we want to take these coordinates and output them inside the box.
That's what I'm going to do.
So let me just comment this dude out and come down underneath.
Oops.
Come down underneath this one.
And now we're going to take the box and we're going to set the text contents.
So currently the text content of the box is this right here.
So what we're now going to do is set it equal to something else.
We're going to overwrite that.
So let's set it equal to a template string because we're going to output some variables here.
And I'm going to say that the X position is and then output a variable dollar sign, curly braces and
we want to output the E dot offset X and we're going to do the same thing for the Y position.
So let me just do a couple of spaces, then we'll say y pos dash and output the e dot offset y.
Now let's see if this works.
So then every time we move over the box, hopefully this text content is going to update with the position
at that moment in time of the mouse inside the box.
So let's try it.
Yep.
There we go.
So we can see the position of the mouse inside the box now.
So this might be useful if you ever need to track the position or the cursor of where your user is looking
on your web page.
Okay, So let's do one more example.
And this is going to be a real event.
So as we scroll down, So first of all, what do we attach this event listener to?
Do we attach it to a specific P tag?
Well, no, because that means it would only listen to a scroll or wheel event in that little p tag.
Instead, we want to attach to the document itself, the whole thing.
So when we scroll in the document.
So that's why I added all these p tags so that we can scroll down in the document and we've got enough
content to do it.
What I'm going to do is come underneath this.
I'm going to grab the document object we've seen.
We can use this.
Then I'm going to add an event listener directly to this document object.
So the event we want to attach to it is a wheel event.
That's the wheel on your mouse, right?
So when you scroll down using that, this is going to fire the callback function I'll take in the event
parameter and I'm just going to log to the console and the event parameter to begin with.
Then we'll take something off it.
So if I now scroll, we can see every time I scroll we get the event object.
Now inside this, we also have a couple of properties called page X and page Y.
If I can just scroll down and find those.
There they are, page X and page Y.
Now this is similar to offset X and offset Y, but this is relative to the whole page.
So the page X is the position relative to the left of the document and the page y is the position relative
to the top of the document.
So if we just close this thing up here, go back to the top and do a little scroll up here and we scroll,
we can see that the page X and the page Y are three, five, two and five.
And that's because the cursor was right up here at the top.
Okay, so let me do this again.
I'm going to scroll from the top here and if we go down to the next event and come down to the page
X and the page Y, we can see now page Y is 58.
Even though my mouse was at the top, we've already scrolled down a bit and the page X was 414 because
we're way over this side of the page.
So now what we're going to do is just log out these things right here.
So E dot page X and then E dot page y.
Oops, we have to spell those correctly.
Page X and E dot page y.
Let's save that and do a little scroll from the top using the wheel.
Okay.
So now we can see all of these different things.
Ever move over to the left?
The X reduces further to the left until right on the left.
I might not get naught, but I do get one.
Okay, cool.
So there we go, my friends.
That's three different types of events that we can use.
I've shown you here the copy event right here, the mouse move event and the wheel event.
But like I said, there's loads of other types of events too, and I will leave a link attached to this
lecture to a whole list of these different events that we can use.
And going forward in the rest of the course we will be using a selection of them as well.
