- Define a JavaScript event
- Identify different types of user events
We've experimented with selecting and manipulating nodes in the DOM using JavaScript: deleting nodes, editing nodes, etc. But most web applications are not used by people opening up the console and editing the DOM using Chrome's DevTools. Instead, people do something and then work happens.
"Doing work" in response to "something happening" is known as event handling. Events are the "something the user does" and the "callback function" is the work that will happen in response to the event being triggered.
In this lesson we'll go over some of the most commonly-used JavaScript events. In the following lessons, we'll learn how to use event listeners to tell JavaScript which event or events we want it to listen for. We'll also learn how to implement callback functions to handle the work happens part of event handling.
JavaScript has the ability to "listen" for things that happen inside the browser. It can listen for events like whether the browser is resized, or whether someone clicked on a specific image on the screen. The event you're probably most familiar with is "click."
We'll go over a few of the more common types of events in this lesson.
Mouse or trackpad events are some of the most common ones you'll be handling using JavaScript eventing. For example, JavaScript can recognize a single click on an element in the page and change the styling of the element to highlight it. Or it can recognize a double-click on an element and open a zoomed-in view of that element.
There are many other mouse events you can use; take a look at the list of JavaScript's mouse events here.
While click events make up the majority of events you'll use, the keyboard is
another important source of events. JavaScript currently includes two keyboard
events: keydown
and keyup
. (A third, keypress
, has been
deprecated.) When a key is pressed, these events provide a code to indicate
which key it was. For example, a game program might listen for keydown
events
and, if the space bar was pressed, make the character jump over the hole.
HTML pages often use a submit button to submit a form to a server. When a user
submits a form, the submit
event is fired. An event handler here might pop up
a thank you overlay or log the user in and take them to their home page.
These are just a few of the most common types of events you'll be handling using
JavaScript. Some other common events are scroll
, mouseenter
and
mouseleave
, focus
, blur
, and onchange
.
As you seek to build more complicated applications, you'll need to handle and trigger work on many more events. One important thing to keep in mind is that not all JavaScript events are supported by all browsers. This list of browser events includes the ones that can be used in most browsers.
JavaScript allows us to trigger work when it detects events. There are lots of events that you can handle using JavaScript. You set up an event handler and, when JavaScript recognizes that event, it will execute the event handler's work, which is stored in a callback function.
Take a few minutes to look through the list of common events to familiarize yourself with the many many ways you can use event handling to enhance your users' experience.