Sometimes when a user clicks or interacts with an element,

we'll need to get more information about that element to know how to proceed.

Let me show you what I mean,

what if I wanted to put two spoiler revealers on this page?

I can add another Star Wars spoiler by going the index.html,

copying and pasting the spoiler, and typing a new one.

So here we'll say, Jar Jar Binks is Sith, save and preview that.

Now when we click either button,

though, both buttons disappear, and both spoilers are revealed, why is that?

Because in our code, we're saying, when any button element

inside of any element with the class of spoilers clicked, do something.

I can fix this easily by giving the second spoiler a unique class or ID.

But what if I wanted to add 5, or 10, or 20 spoilers to my spoiler revealer?

Then I'd have to repeat a lot of code, and adding and maintaining unique IDs and

event listeners on each element could become a real pain.

We can use something called the event object to fix this issue,

to control which button is hidden.

So far, we haven't used it, but every time an event is triggered,

the event object gets passed automatically into the event handler.

To access the event object, we have to define a parameter in our event handler,

like this.

What exactly is an event object, and why is it useful?

The event object contains a bunch of information about the event that has

just occurred.

And some of this information can come in really handy, as we shall see.

Let's take a look at it in the console to see what information it gives us.

Open up the workspace for this video, if you don't have it open already.

And inside of this click handler,

let's pass the event object, and console.log the event.

Now let's open Chrome Dev Tools.

When I click the button,

it will reveal to us the innards of this mysterious event object.

So this is all the information we have access to when an event occurs.

In this case, the event being, when the button was clicked, reveal the spoiler.

As you can see,

there's a ton of info, a lot of which we don't care about right now.

But notice that the event object contains a couple of key value pairs here

that could be really useful.

It tells us the type of event that occurred, for example, in this case,

it was a click.

It also tells us the target of the event,

which is the specific element that was clicked on.

Let's console.log event.target,

Refresh, you can see it returns to us the specific button that was clicked on.

Note that the event.target is not the parent spoiler element, but

the specific button that was clicked, that's event propagation in action.

So here, where we're hiding the button, or

in this case all buttons, we can use event.target instead.

So what we're saying here is that when the button is clicked,

hide the target of the event.

In other words, hide the specific button that was clicked on, and not just any and

all elements on the page that are nested within the spoiler.

One thing to note here, in this example, we're using the name event.

Another common name that developers use for event variables is evt.

Or simply e.

It doesn't actually matter what you call it, but

it's convention to use one of these variants.

I like to be explicit, so I use the full word event.

Let's save and preview this, don't need this anymore.

Now the button disappears for whatever element we click on.

However, both spoilers are still revealed, because we have this line of code here.

This line of code is programmed to show on click any element with a class of

spoiler that has a child span element.

We'll fix that issue in an upcoming video, for now,

we can just comment out that line, save, go back and refresh the page.

And you'll see now that when we click a button,

only the button we've clicked disappears, pretty handy.

The event object is also handy for

preventing default browser behavior using the prevent default method.

We'll learn about that later in this course.