Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Interacting with the DOM

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Event Object

4:16 with Reggie Williams

In JavaScript, each event triggers the creation of an event object which tells us all about the event. When an event handler is called, it receives an event object as its first argument. This object also gives us access to a few methods we can use to help us work with the event inside the handler.

MDN page for the Event Object

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Imagine you want to go to an event with a friend, but 0:00
    you don't know any of the details. 0:03
    Without knowing the time or location, it would be pretty difficult to attend. 0:05
    Luckily, your friend gives you a flyer and this flyer contains information about 0:11
    the event, including the time, date, location, and dress code. 0:17
    In this example, DOM events are similar to real life events. 0:22
    It would be very difficult to respond correctly to events without knowing much 0:27
    about them. 0:32
    In JavaScript, each event triggers the creation of an event object, 0:33
    which is sort of like that event's very own flyer. 0:38
    The event object is generated by the browser and 0:41
    has some useful information about the event. 0:45
    When an event handler is called, 0:48
    it receives an event object as its first argument. 0:50
    This object also gives us access to methods and 0:54
    properties we can use to help us work with the event inside the handler. 0:58
    Here's the MDN page for the event object. 1:03
    If you scroll down, you can inspect the properties and 1:06
    methods available on this object. 1:09
    The property you'll probably use most often is event.target. 1:11
    This is a reference to the element that first received the event. 1:17
    For example, if you click on a list item, 1:21
    target would contain a reference to that list item. 1:24
    Let's inspect this property in action. 1:27
    First, I'll switch over to our code and comment out the handler we wrote earlier. 1:30
    Just about every text editor has a shortcut key to do this. 1:35
    With the code selected on workspaces, you can hit the command forward 1:39
    slash on a Mac, or Ctrl forward slash on a Windows computer to do this. 1:43
    Commenting this code will allow us to prevent it from running while we try 1:48
    a little experiment. 1:52
    Then, when we're done, we can uncomment it to make the code active again. 1:54
    Let's add a temporary click handler to the document object. 2:02
    Pass the click event type and an anonymous function 2:13
    Now let's pass in the event parameter, so our callback function can use the object. 2:23
    It's usually written as event, or even just the letter e. We'll use event here. 2:29
    Inside the handler, we'll log out the event object. 2:36
    Back over in the browser, we'll open up the console. 2:55
    And when we click on an item, we can see the event object printed to the console. 2:58
    There's plenty of information about an event, including its X and 3:05
    Y coordinates on the page, timeStamp, and more. 3:10
    One property of the event object that will be important for 3:13
    us is the event target property. 3:18
    It currently has a value of li, and when we hover over it, 3:20
    we can see the list item that triggered the event highlighted on the page. 3:24
    Let's change the console log statement to print out event.target. 3:30
    We'll save and refresh. 3:43
    Now, when any element on the page is clicked, 3:44
    it will print out the event target to the console. 3:48
    You've learned a lot so far. 3:58
    You've learned what events are and how to handle them with event listeners. 4:01
    You've learned about how to access the event object to handle events 4:06
    intelligently. 4:10
    You've really learned the basics of making a web page interactive. 4:11
    Well done. 4:15

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up