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
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