Preview
Video Player
00:00
00:00
What is an Event?
2:56One reason JavaScript is a powerful programming language is that it allows developers to respond to user interactions and changes in the browser. We can write JavaScript code to detect when different events occur and make changes to the browser in response.
[MUSIC]
0:00
Hi, I'm Reggie, a developer and
instructor here at Treehouse.
0:09
I use he him pronouns.
0:13
It's time for the main event or
events to be more precise.
0:15
Today, we'll learn about DOM events, and
how they help JavaScript developers add
0:19
interactivity to web pages and
applications.
0:24
If you're here now, there's a strong
chance you're already familiar with quite
0:27
a few of the events that
JavaScript can recognize.
0:32
Anytime you load a web page in
your browser and interact with it,
0:34
you generate all kinds of events,
whether you realize it or not.
0:38
When we click a button on a web page,
that's an event.
0:42
When we scroll down a page,
that's an event.
0:45
When you push a keyboard button,
that's an event.
0:48
When we have an error, that's an event.
0:51
Even a page loading is
considered an event.
0:54
The list goes on.
0:57
Browsers listen for these events and
can do something in response,
0:59
like change a page to dark
mode when you click a button.
1:03
When you interact with the web page,
you may trigger thousands of these events.
1:06
And in most cases, the browser doesn't
do anything noticeable in response.
1:10
That is unless we write JavaScript code
that listens for and handles events.
1:15
In fact, JavaScript was created to
listen for events and respond to them.
1:21
For example, you can write code that
waits for a user to click a button,
1:26
and then runs a function
when that button is clicked.
1:31
Maybe the function expands part of
the page to reveal other elements or
1:35
sends information to a server.
1:40
Besides clicking, there are other
events that can come from a mouse.
1:42
It's possible to double click,
hold down the button,
1:46
release a button, move the pointer,
hover over an element,
1:51
and move the pointer out
of an element's area.
1:56
On smartphones and tablets,
there are similar touch events.
2:00
A keyboard is another way
of generating user events.
2:04
Some events aren't necessarily
tied directly to a user's actions.
2:09
The load event I mentioned,
occurs when the browser has completely
2:13
loaded all of the HTML, CSS,
and JavaScript for the page.
2:18
These events are some of
the more commonly used, but
2:22
they are by no means all of them.
2:26
If you'd like to read more about events,
including a long,
2:28
long list of event types, I've included
some links for you in the teacher's notes.
2:32
Now that we know more about events,
2:37
it's time to find out how we can
use them to trigger responses.
2:39
We know that JavaScript can run
functions when an event occurs, but
2:43
how do we set this up?
2:48
It requires passing a function
into another function.
2:49
And it will do just
that in the next video.
2:53