- 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 that happens" and the "callback function" is the work that will happen in response to the event being triggered. In this lesson we'll focus on the first half of that relationship: the event. We'll discuss the second half, the "callback function," or, "callback" in a later lesson.
We'll explore this relationship in this document.
JavaScript has the ability to "listen" for things that happen inside the browser. It can listen for events like whether the browser resized, or whether someone clicked on a specific image on the screen. The event you're probably most familiar with is "click."
We'll cover a few more common types of events below.
Let's take a look at some of the more common events.
The mouse / trackpad is a primary pointing device when working with browsers. In response to click, double-click, right-click, etc. we can do work like, changing the background of the document to a random color every time someone clicks on the page.
While click events make up the majority of events you'll use, the
keyboard is also an important source of events. We can listen
for keypress, keydown, and keyup. When these events are handled,
we can find out which keys were pressed (like if a space was hit to 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, play a song, or provide some other sort of interactivity
depending on what values were entered in the form.
As you seek to build more complicated applications, you'll need to handle and trigger work on more events. Here's a list of a ton of browser events.
JavaScript allows us to trigger work when it detects events. Some other common
events are scroll, mouseenter and mouseleave, focus, blur, and
onchange. There are lots and lots of events - what events do popular websites handle?
When JavaScript recognizes an event that applies to a "event handler" that has been set
up, it will execute that "handler's" work, which is stored in a callback function.
This might feel intimidating at first, but if you familiarize yourself with them all now,
you can get the hang of using them before you end up needing them for a project task!