Using the event properties (Video Version)

I've got this webpage with a
picture of Winston.

It's getting cold here,
and Winston is getting old,

so he wishes he had a beard.

I could draw the beard myself.

But I think it'd be way cooler if
the user could draw the beard

on Winston themselves,
however they want it to look--

a long beard, some stubble,
whatever they're into.

So how could we do that?

One way is to add an event listener
for the `mouseMove` event on the image,

so that our function would get called
whenever the user moved their mouse

over the face.

Let's set that up, using
what we just learned.

The first step is to find
the element, the image.

[typing]

..."face", since I had that nice ID.

The second step is to define
the callback function.

And we're going to start with a simple one
just to make sure that it worked,

and we'll make it do more later.

[typing]

Okay.

And the final step is to
connect this to this,

to make sure that this gets called
when this gets the `mouseMove` event.

So we'll write
`face.addEventListener("mousemove",`

and then pass it the name
of the function, `onMouseMove`.

Now, pause the talk-through, and try
moving your mouse over the face.

Do you see the message?

Okay, hopefully you saw that
we've got that event working.

But it's not what we want
our event listener to do.

We want it to draw, not to write text.

How can we draw in a webpage?

We could bring in the `` tag
and draw pixels on it, like we do

with ProcessingJS programs here.

But all we're drawing is a beard,
which is really a bunch of black dots.

So we could just create a `` for
each dot, and position that ``

with absolute positioning.

Here, let me show you with
one beard follicle.

So I'll make a `` with class `beard`,
and then I've got some nice CSS

to style that beard,
which I'll just stick in here.

And let's just fix that up.

So you can see our beard is a
black background, it's 5 by 5 pixels,

it's got this 2 pixel border radius
to make it a little bit round,

and it's using absolute
positioning scheme.

Currently, the ``
shows up under the image.

How do we get it to show up
on top of the face?

We're using absolute positioning,
so that means that we should use

the `top` and `left` properties
to say where it should actually

get positioned,
now that it's absolute.

So let's say `top: 80px;`,
and then `left:15px;`.

Beautiful.

Now that we've got that working in HTML,
let's make it work in JavaScript,

so that the user dynamically creates this
`` every time they move their mouse.

We'll go back down to our
JavaScript callback function.

The first thing is to create a ``,

which we can do with our
`document.createElement()` function--

it's going to be a `div`.

Second thing to do is to add that class:
`beard.className = "beard";`.

So we've got this ``,
it's floating off in space.

Final step, append it to the body.

All right, so now we've basically done
in JavaScript what we had done in HTML,

so we can delete this HTML.

Now you should pause the talk-through,
and try clicking Winston.

See what happens.

Did you see the beard follicle show up?

And did you try clicking multiple times?

If you did, you probably noticed that
your second click did nothing--

or at least it appeared to do nothing.

That's because every `` has
the same `top` and `left` properties,

so new ones just pile
on top of the old ones.

We want the `` to show up
wherever the user's mouse is instead.

How do we actually find out
where the user's mouse is?

As it turns out, the browser
records a lot of information

every time any user event happens,
like where it happens.

And the browser gives you
that information every time

it calls your event listener function.

But where, how, can we get this
amazing information?

I'll type one letter, to give you a hint.

That `e` here, is the event
information object.

And the browser sends it as the first
argument whenever it calls

an event listener callback function.

We didn't need it before, so I didn't
bother writing out the arguments list.

But now that we're going to use it,
I'm giving it a name, to make it

easy to reference inside the function.

Remember that in JavaScript, a function
can be called with any number

of arguments, even if the function
doesn't use or refer to any of them.

So we were always getting this
information, we just didn't know it.

Now I'm going to log out `e`:
`console.log(e)`.

Pause the talk-through, click Winston,
and check your console.

You should see the
event object logged out,

and you can skim through
all the properties on it.

There are two event properties in
particular that we're very interested in:

`clientX` and `clientY`.

They record the x and y of the event,
and that's what we're going to use

to position the beard.

Let's set the top of the beard equal to
e.clientY, plus "px", for the units.

And set the left equal to
e.clientX, plus "px" for units.

Now pause and try mousing over.

Draw Winston a beard.

Pretty cool, huh?

I bet you can imagine all sorts of fun
painting apps that you can make,

using clientX and clientY.

And as you saw in the console,
there were a bunch of other properties

on the event object
that you could use as well.

The most useful, I think, are
the keyboard-related ones.

So that you can find out
what keys the user was pressing

when the event happened,
and use that to make a

keyboard-accessible interface,
or a really fun game.

Oh, and one more thing:

you don't have to call this argument `e`.

That's typical, but some developers
call it `evt`, or `event`.

It doesn't matter what you call it,
as long as it's referring to

the first argument that the browser
passes to your function,

and as long as you then
refer to it that way later as well.

If you're having trouble with it,
make sure you use console.log

to help you debug what's going on.

When you're a web developer,

the console is pretty much
your best friend ever-- use it!