Events in real life take the form of
specific actions occurring at specific

times.

For instance, in the game of basketball,
when the ball goes through the hoop.

The shooting team gets points.

The event is the ball
going through the hoop.

The resulting action is that
the scoring team gets points.

The browser has events as well.

Every time you move your mouse,
click on a link,

submit a form, or do anything really,

your browser makes an announcement
of the action you just took.

I want to show you what
the browser is actually doing.

Google Chrome provides a handy function.

The monitorEvents function, that will
allow you to take a peek under the hood

to see events as they are taking place.

You pass to the function the element
on the page that you want it to watch

for events.

Now this function can only be used in
the console on the Chrome Dev Tools.

Don't try to use this function
in your JavaScript file.

It won't work, and
will cause a reference error.

With that disclaimer out of the way, let
me show you the feedback it provides.

So, on this page, you can see,
I have a simple text field.

First I'll use jQuery to select
all the inputs on the page,

then I'll select just
this first one here.

Next I'm going to call
the monitorEvents function and

pass it the variable holding
the first input field.

The monitorEvents function watches
the element for events, and

log them all out.

So, I'll interact with the text field
and watch Chrome log out all the events.

As you can see using
the monitorEvents function,

you can observe what the browsers doing
when you interact with the page elements

in different ways.