Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
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!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up