This course will be retired on February 12, 2022. We recommend "JavaScript and the DOM" for up-to-date content.

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

Preview

Start a free Courses 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.

[MUSIC] 0:00
Any time you interact with a web page, you generate all kinds of events, 0:04
whether you realize it or not. 0:08
An event is something you do on the web page like moving your mouse around, 0:10
scrolling or clicking a link. 0:14
Browsers listen for these events and can do something in response, 0:16
like open a larger version of a photo when you click on a thumbnail image. 0:19
When you interact with a web page, you may trigger thousands of these events. 0:23
And in most cases, the browser doesn't do anything special in response. 0:27
That is, unless we write JavaScript code that handles or responds to that event. 0:31
In fact, JavaScript was created to listen for events and respond to them. 0:36
So for example, you can write code that waits for a user to click a button and 0:40
then runs a function when that button is clicked. 0:44
Perhaps the function expands part of the page to reveal other elements or 0:46
sends information to a server. 0:50
There are many other events beside click events. 0:52
Users scroll, move their mice, touch and drag on their phones or 0:55
tablets or type, to name a few. 0:58
Each of these events has a name that browsers recognize. 1:00
For example, 1:04
there's the click event, which we've been working with in this course so far. 1:04
However, there are many others. 1:08
For starters, consider other things you can do with a mouse or trackpad. 1:10
Apart from clicking, you can double click, hold the button down, 1:14
lift the button up, move the pointer, hover it over an element and 1:17
move the pointer out of an element's area. 1:21
On smartphones and tablets, there are similar touch events. 1:24
A keyboard is another way of generating user events. 1:27
Some events aren't necessarily tied directly to a user's action though. 1:31
For example, the load event occurs when the browser has completely loaded all of 1:34
the HTML, CSS and JavaScript for the page. 1:39
These events are some of the more commonly used, but are by no means all of them. 1:42
If you'd like to read more about events, I've posted some links for 1:46
you in the teacher's notes. 1:49
Now that you know more about events, 1:51
it's time to see how they can trigger responses. 1:52
We know that JavaScript can run a function when an event occurs, but 1:55
how do we set this up? 1:59
To understand that, we'll take a closer look at functions and 2:00
JavaScript in the next video. 2:03

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

Sign up