The Event Object

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