Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

What is an Event?

2:05 with Guil Hernandez and Joel Kraft

Any time you interact with a webpage, you generate all kinds of events. An event is something you do on the web page, like moving your mouse around, scrolling, or clicking a link. Browsers "listen" for events and, with JavaScript, we can do something in response to an event.

MDN has a thorough list of DOM events, as well as demonstration code so you can see many of them in use.

  • 0:00

    [MUSIC]

  • 0:04

    Any time you interact with a web page, you generate all kinds of events,

  • 0:08

    whether you realize it or not.

  • 0:10

    An event is something you do on the web page like moving your mouse around,

  • 0:14

    scrolling or clicking a link.

  • 0:16

    Browsers listen for these events and can do something in response,

  • 0:19

    like open a larger version of a photo when you click on a thumbnail image.

  • 0:23

    When you interact with a web page, you may trigger thousands of these events.

  • 0:27

    And in most cases, the browser doesn't do anything special in response.

  • 0:31

    That is, unless we write JavaScript code that handles or responds to that event.

  • 0:36

    In fact, JavaScript was created to listen for events and respond to them.

  • 0:40

    So for example, you can write code that waits for a user to click a button and

  • 0:44

    then runs a function when that button is clicked.

  • 0:46

    Perhaps the function expands part of the page to reveal other elements or

  • 0:50

    sends information to a server.

  • 0:52

    There are many other events beside click events.

  • 0:55

    Users scroll, move their mice, touch and drag on their phones or

  • 0:58

    tablets or type, to name a few.

  • 1:00

    Each of these events has a name that browsers recognize.

  • 1:04

    For example,

  • 1:04

    there's the click event, which we've been working with in this course so far.

  • 1:08

    However, there are many others.

  • 1:10

    For starters, consider other things you can do with a mouse or trackpad.

  • 1:14

    Apart from clicking, you can double click, hold the button down,

  • 1:17

    lift the button up, move the pointer, hover it over an element and

  • 1:21

    move the pointer out of an element's area.

  • 1:24

    On smartphones and tablets, there are similar touch events.

  • 1:27

    A keyboard is another way of generating user events.

  • 1:31

    Some events aren't necessarily tied directly to a user's action though.

  • 1:34

    For example, the load event occurs when the browser has completely loaded all of

  • 1:39

    the HTML, CSS and JavaScript for the page.

  • 1:42

    These events are some of the more commonly used, but are by no means all of them.

  • 1:46

    If you'd like to read more about events, I've posted some links for

  • 1:49

    you in the teacher's notes.

  • 1:51

    Now that you know more about events,

  • 1:52

    it's time to see how they can trigger responses.

  • 1:55

    We know that JavaScript can run a function when an event occurs, but

  • 1:59

    how do we set this up?

  • 2:00

    To understand that, we'll take a closer look at functions and

  • 2:03

    JavaScript in the next video.

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

Sign up