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