1
00:00:00,000 --> 00:00:09,162
[MUSIC]

2
00:00:09,162 --> 00:00:13,255
Hi, I'm Reggie, a developer and
instructor here at Treehouse.

3
00:00:13,255 --> 00:00:15,760
I use he him pronouns.

4
00:00:15,760 --> 00:00:19,645
It's time for the main event or
events to be more precise.

5
00:00:19,645 --> 00:00:24,628
Today, we'll learn about DOM events, and
how they help JavaScript developers add

6
00:00:24,628 --> 00:00:27,451
interactivity to web pages and
applications.

7
00:00:27,451 --> 00:00:32,022
If you're here now, there's a strong
chance you're already familiar with quite

8
00:00:32,022 --> 00:00:34,842
a few of the events that
JavaScript can recognize.

9
00:00:34,842 --> 00:00:38,785
Anytime you load a web page in
your browser and interact with it,

10
00:00:38,785 --> 00:00:42,813
you generate all kinds of events,
whether you realize it or not.

11
00:00:42,813 --> 00:00:45,821
When we click a button on a web page,
that's an event.

12
00:00:45,821 --> 00:00:48,602
When we scroll down a page,
that's an event.

13
00:00:48,602 --> 00:00:51,680
When you push a keyboard button,
that's an event.

14
00:00:51,680 --> 00:00:54,937
When we have an error, that's an event.

15
00:00:54,937 --> 00:00:57,896
Even a page loading is
considered an event.

16
00:00:57,896 --> 00:00:59,666
The list goes on.

17
00:00:59,666 --> 00:01:03,608
Browsers listen for these events and
can do something in response,

18
00:01:03,608 --> 00:01:06,806
like change a page to dark
mode when you click a button.

19
00:01:06,806 --> 00:01:10,830
When you interact with the web page,
you may trigger thousands of these events.

20
00:01:10,830 --> 00:01:15,742
And in most cases, the browser doesn't
do anything noticeable in response.

21
00:01:15,742 --> 00:01:21,312
That is unless we write JavaScript code
that listens for and handles events.

22
00:01:21,312 --> 00:01:26,521
In fact, JavaScript was created to
listen for events and respond to them.

23
00:01:26,521 --> 00:01:31,381
For example, you can write code that
waits for a user to click a button,

24
00:01:31,381 --> 00:01:35,030
and then runs a function
when that button is clicked.

25
00:01:35,030 --> 00:01:40,268
Maybe the function expands part of
the page to reveal other elements or

26
00:01:40,268 --> 00:01:42,683
sends information to a server.

27
00:01:42,683 --> 00:01:46,940
Besides clicking, there are other
events that can come from a mouse.

28
00:01:46,940 --> 00:01:51,427
It's possible to double click,
hold down the button,

29
00:01:51,427 --> 00:01:56,390
release a button, move the pointer,
hover over an element,

30
00:01:56,390 --> 00:02:00,221
and move the pointer out
of an element's area.

31
00:02:00,221 --> 00:02:04,631
On smartphones and tablets,
there are similar touch events.

32
00:02:04,631 --> 00:02:09,013
A keyboard is another way
of generating user events.

33
00:02:09,013 --> 00:02:13,252
Some events aren't necessarily
tied directly to a user's actions.

34
00:02:13,252 --> 00:02:18,069
The load event I mentioned,
occurs when the browser has completely

35
00:02:18,069 --> 00:02:22,310
loaded all of the HTML, CSS,
and JavaScript for the page.

36
00:02:22,310 --> 00:02:26,334
These events are some of
the more commonly used, but

37
00:02:26,334 --> 00:02:28,810
they are by no means all of them.

38
00:02:28,810 --> 00:02:32,409
If you'd like to read more about events,
including a long,

39
00:02:32,409 --> 00:02:37,511
long list of event types, I've included
some links for you in the teacher's notes.

40
00:02:37,511 --> 00:02:39,723
Now that we know more about events,

41
00:02:39,723 --> 00:02:43,641
it's time to find out how we can
use them to trigger responses.

42
00:02:43,641 --> 00:02:48,285
We know that JavaScript can run
functions when an event occurs, but

43
00:02:48,285 --> 00:02:49,760
how do we set this up?

44
00:02:49,760 --> 00:02:53,279
It requires passing a function
into another function.

45
00:02:53,279 --> 00:02:55,490
And it will do just
that in the next video.