Mouse events are defined to capture a range of interactions driven by the mouse. These can be further categorized as mouse click and mouse move events. Table 9.6 lists some of the possible events one can listen for from the mouse.

Interestingly, many mouse events can be sent at a time. The user could be moving the mouse off of one <div> and onto another in the same moment, triggering mouseon and mouseout events as well as the mousemove event. The Cancelable and Bubbles properties of the event object can be used to handle these complexities. The nearby Extended Example provides a practical example illustrating the use of mouse events.

Keyboard events are often overlooked by novice web developers, but are important tools for power users. Table 9.7 lists the most common keyboard events.

These events are most useful within input fields. We could, for example, validate an email address, or send an asynchronous request for a dropdown list of suggestions with each key press.

We could listen to key press events for an input box with an id of key and echo each pressed key back to the user as shown in Listing 9.7.

document.getElementById("key").addEventListener("keydown",
  function (e) {
     // get the raw key code
     let keyPressed=e.key;
     // convert to string
     let character=String.fromCharCode(keyPressed);
     alert("Key " + character + " was pressed");
});

Forms are the main means by which user input is collected and transmitted to the server. Table 9.8 lists several of the most common form events.

The events triggered by forms allow us to do some timely processing in response to user input. The most common JavaScript listener for forms is the submit event. In Listing 9.8, we listen for that event on a form with id loginForm. If the password field (with id pw) is blank, we prevent submitting to the server using preventDefault() and alert the user. Otherwise we do nothing, which allows the default event to happen (submitting the form). Section 9.5 will examine form event handling in more detail.

document.querySelector("#loginForm").addEventListener("submit",   function(e) {
    let pass = document.querySelector("#pw").value;
    if (pass=="")  {
         alert ("enter a password");
         e.preventDefault();
    }
});

Media events are those connected to the <audio> and <video> elements. Table 9.9 lists some of the events available for working with these two media elements.

Frame events (see Table 9.10) are the events related to the browser frame that contains your web page. You have already encountered load and DOMContentLoaded events back in Section 9.3.2 on page loading. Another commonly used frame event in real-world web sites is the scroll event. Have you visited a site with multiple images but those images don’t appear until you scroll the browser? This approach that defers the loading (i.e., the requesting) of images until they are needed is often referred to as lazy loading, and is an important approach in creating performant web sites that contain a large number of images. Figure 9.17 illustrates lazy loading and how some coding around the scroll, resize, and orientationchange events achieves this effect.

Figure 9.17 Lazy loading via frame events