Preview
Video Player
00:00
00:00
Introduction to Browser Events
7:43When you load a web page in your browser and start interacting with it, you're generating all kinds of events (or actions) that the browser is listening for and registering behind the scenes. You can write JavaScript to make the browser do something in response to a user's action.
When you load a web page
in your browser and
0:00
start interacting with it,
you're generating all kinds of events or
0:02
actions that the browser is listening for
and registering behind the scenes.
0:06
We can write JavaScript
to make the browser
0:11
do something in response to a user's action.
0:14
For instance, clicking a photo thumbnail
pops up a larger version of the photo,
0:17
scrolling to a specific part of the page,
initiate an animation or
0:22
something might happen when clicking into
a text field submitting a form and so on.
0:26
A user may spark tens, hundreds or
even thousands of these events, and
0:32
in most cases, the browser doesn't
do anything special in response.
0:37
To have the browser do something in
response to one of these events,
0:42
we have to write some JavaScript
code that first, listens for
0:46
a specific event and
then handles and responds to it.
0:50
In this video, I'll introduce you to
what are called event listeners and
0:54
how to use them to make your sites and
apps respond to user actions,
0:58
specifically clicking on an element.
1:02
We'll get started by identifying
the element to be clicked and
1:04
then performing some action
on the page as a result.
1:09
In your workspace or project files,
open the file app.js.
1:13
This JavaScript file is
already linked to index.html.
1:17
Let's first access the body
of the page just like
1:21
we did earlier with document.body.
1:26
Objects in the DOM, like body,
can detect and listen for
1:29
events that happen when the user
interacts with the page.
1:33
Now that we have a reference to the body
element, we can make it listen for
1:38
mouse clicks using
the addEventListener method.
1:42
After document.body,
type dot addEventListener,
1:45
followed by a set of parentheses.
1:50
An event listener is a function
that waits for an event to happen.
1:52
Now the body element is set up to
listen for any given events to fire.
1:58
There are many different kinds of
browser events, such as key presses,
2:03
scrolling, or mouse moves.
2:08
You'll learn about those
in a later course, but
2:10
let's start with one of the most
common user interactions, and
2:13
the one we'll use a lot of in this course,
clicking.
2:16
Keep in mind that on touchscreen devices,
tapping is equivalent to clicking.
2:19
We're going to pass addEventListener two
arguments, the event type to listen for
2:24
as a string, and a function that performs
some action in response to that event.
2:29
First, we want to listen for any moments
that a user clicks inside the body.
2:36
So the first parameter we'll pass in
is the string click, the event's name.
2:41
The body is now listening for clicks.
2:49
Now, we'll tell the browser what to
do when a user clicks anywhere inside
2:51
the body.
2:55
We'll do that by passing
a function as the second argument.
2:57
I'm writing an arrow function, but
3:01
you could also write this
as a function declaration.
3:03
You can review an example of
that in the teacher's notes.
3:07
Think of this event listener as
a method that sends a signal to
3:12
the browser that something has
happened within the body element.
3:16
In this case, a click.
3:21
The event handler is now
set up, the function will execute as
3:24
soon as the click event gets
registered in the target body element.
3:28
Let's have the function log
a message in the browser's console.
3:33
Within the function body,
add console.log and
3:37
pass it the string,
"You clicked the body of the page".
3:42
Refreshing the browser and opening
the console, no message appears yet.
3:56
Did we add the event handler correctly?
4:02
Well, let's click anywhere
on the page to find out.
4:05
It logs a message, good.
4:08
So we've successfully set
the body up to listen for events.
4:10
If you click on it again and again,
4:15
the browser continues to respond
to each click and log the message.
4:17
Now let's try changing
content inside the body.
4:26
This time I'll store
a reference to the body element
4:29
in a constant named body,
with const body = document.body.
4:35
Now I can reference the body
element in my event listener
4:41
using the variable body.
4:46
Inside the event listener's function,
I'll update
4:48
the inner HTML of the body
with body.innerHTML and
4:53
set it to an H1 element displaying
the text, Hello, world.
4:58
This selects or
finds the body element in the document,
5:11
then replaces all of its innerHTML
with just an h1 with the text Hello,
5:16
world when you click
anywhere inside the body.
5:21
Now if I reload the browser,
the page resets to its initial state.
5:25
So let's go through
this code line by line.
5:30
On the first line,
we get a reference to the body element and
5:33
assign it to a variable.
5:37
Next, we call
the addEventListener on the body,
5:39
instructing the browser to do
something when it's clicked.
5:43
And finally,
we tell the browser to manipulate the body
5:48
element by changing its inner HTML for
every click event.
5:53
Don't worry too much about
addEventListener, events, and
5:57
this function right now.
6:01
We'll go over how a lot of this
code works more in depth soon.
6:04
The main thing to note for
now is that we selected an element,
6:08
set it to listen for a click event,
and perform a function as a result.
6:12
This is a typical sequence when
controlling a web page with JavaScript.
6:18
This ability to listen and
6:22
respond to events allows users
to interact with a web page.
6:24
There are many other ways to target
elements on the page with JavaScript, and
6:28
that will be the focus of the next stage.
6:33
In this stage, you learned about
the browser as a global environment for
6:36
JavaScript and that the browser
has a global window object,
6:39
providing all the properties and
methods of the current browser window.
6:43
This window object also contains
an important object called the document
6:47
object representing the HTML document
loaded into the browser window.
6:52
It serves as the entry point
into the web page's content.
6:56
You also learned that the DOM or
7:00
Document Object Model is an object
based representation of a web page,
7:02
and it's what allows a JavaScript to
access and make changes to the page.
7:06
You can think of the DOM as a tree-like
structure of HTML tags that stem out from
7:11
one root document node.
7:15
Finally, to control an element with
JavaScript, you first access the element,
7:17
then you can read or
update its contents and properties.
7:22
An element in the DOM can also listen for
a browser event and
7:26
execute a function in response.
7:30
Usually this event is a user
action like a mouse click.
7:32
Now that you have a high level
view of JavaScript and the DOM,
7:36
let's get to the fun part and
write more code.
7:39
See you in the next stage.
7:41