Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Use the event object to obtain useful information about the event that has just occurred. This can come in handy for quite a few programming tasks!
Sometimes when a user clicks or
interacts with an element,
0:00
we'll need to get more information about
that element to know how to proceed.
0:03
Let me show you what I mean,
0:07
what if I wanted to put two
spoiler revealers on this page?
0:08
I can add another Star Wars
spoiler by going the index.html,
0:11
copying and pasting the spoiler,
and typing a new one.
0:16
So here we'll say, Jar Jar Binks is Sith,
save and preview that.
0:29
Now when we click either button,
0:35
though, both buttons disappear, and
both spoilers are revealed, why is that?
0:37
Because in our code, we're saying,
when any button element
0:42
inside of any element with the class
of spoilers clicked, do something.
0:47
I can fix this easily by giving
the second spoiler a unique class or ID.
0:52
But what if I wanted to add 5, or 10,
or 20 spoilers to my spoiler revealer?
0:56
Then I'd have to repeat a lot of code,
and adding and maintaining unique IDs and
1:02
event listeners on each element
could become a real pain.
1:06
We can use something called
the event object to fix this issue,
1:09
to control which button is hidden.
1:13
So far, we haven't used it, but
every time an event is triggered,
1:15
the event object gets passed
automatically into the event handler.
1:19
To access the event object, we have to
define a parameter in our event handler,
1:23
like this.
1:28
What exactly is an event object,
and why is it useful?
1:29
The event object contains a bunch of
information about the event that has
1:33
just occurred.
1:36
And some of this information can come
in really handy, as we shall see.
1:38
Let's take a look at it in the console
to see what information it gives us.
1:42
Open up the workspace for this video,
if you don't have it open already.
1:45
And inside of this click handler,
1:49
let's pass the event object,
and console.log the event.
1:53
Now let's open Chrome Dev Tools.
2:02
When I click the button,
2:06
it will reveal to us the innards
of this mysterious event object.
2:07
So this is all the information we
have access to when an event occurs.
2:12
In this case, the event being, when the
button was clicked, reveal the spoiler.
2:16
As you can see,
2:20
there's a ton of info, a lot of
which we don't care about right now.
2:21
But notice that the event object contains
a couple of key value pairs here
2:26
that could be really useful.
2:30
It tells us the type of event that
occurred, for example, in this case,
2:31
it was a click.
2:36
It also tells us the target of the event,
2:37
which is the specific
element that was clicked on.
2:40
Let's console.log event.target,
2:43
Refresh, you can see it returns to us
the specific button that was clicked on.
2:51
Note that the event.target is not
the parent spoiler element, but
2:57
the specific button that was clicked,
that's event propagation in action.
3:00
So here, where we're hiding the button, or
3:05
in this case all buttons,
we can use event.target instead.
3:08
So what we're saying here is
that when the button is clicked,
3:12
hide the target of the event.
3:16
In other words, hide the specific button
that was clicked on, and not just any and
3:18
all elements on the page that
are nested within the spoiler.
3:22
One thing to note here, in this example,
we're using the name event.
3:26
Another common name that developers
use for event variables is evt.
3:30
Or simply e.
3:39
It doesn't actually matter
what you call it, but
3:42
it's convention to use
one of these variants.
3:45
I like to be explicit, so
I use the full word event.
3:48
Let's save and preview this,
don't need this anymore.
3:53
Now the button disappears for
whatever element we click on.
4:00
However, both spoilers are still revealed,
because we have this line of code here.
4:04
This line of code is programmed to show
on click any element with a class of
4:10
spoiler that has a child span element.
4:15
We'll fix that issue in an upcoming video,
for now,
4:17
we can just comment out that line,
save, go back and refresh the page.
4:21
And you'll see now that
when we click a button,
4:28
only the button we've clicked disappears,
pretty handy.
4:31
The event object is also handy for
4:35
preventing default browser behavior
using the prevent default method.
4:37
We'll learn about that
later in this course.
4:41
You need to sign up for Treehouse in order to download course files.
Sign up