17.1 Types of Events
In the early days of the Web, client-side programmers made do with only a small set of events: “load”, “click”, “mouseover”, and the like. These legacy event types are well supported by all browsers and are the subject of §17.1.1 . As the web platform has grown to include more powerful APIs, the set of events has grown large. No single standard
17.1 Types of Events | 447
defines a complete set of events, and at the time of this writing, the number of events supported by browsers is growing rapidly. These new events come from three sources:
- The DOM Level 3 Events specification, which after a long period of inactivity is being actively worked on under the auspices of the W3C. DOM events are covered in §17.1.2 .
- Many new APIs in the HTML5 specification (and related spin-off specifications) define new events for things like history management, drag-and-drop, cross-document messaging, and audio and video playback. §17.1.3 gives an overview of these events.
Note that many of these new event types are not yet widely implemented and are defined by standards that are still in draft stage. The subsections that follow provide an overview of the events, but do not document each one in detail. The rest of this chapter covers the event handling model comprehensively and includes lots of examples of working with events that are well supported. If you understand how to work with events generally, you will be able to easily handle new event types as new web APIs are defined and implemented.
Events can be grouped into some general categories, and knowing what these categories
are will help you to understand and organize the long list of events that follows:
Device-dependent input events
These are events that are directly tied to a specific input device, such as the mouse or keyboard. They include legacy event types such as “mousedown”, “mousemove”, “mouseup”, “keydown”, “keypress”, and “keyup” and also new touch-specific events like “touchmove” and “gesturechange”.
Device-independent input events
These are input events that are not directly tied to a specific input device. The click event, for example, indicates that a link or button (or other document element) has been activated. This is often done via a mouse click, but it could also be done by keyboard or (on touch-sensitive devices) by gesture. The textinput event (which is not yet widely implemented) is a device-independent alternative to the keypress event and supports keyboard input as well as alternatives such as cut-and-paste and handwriting recognition.
User interface events
UI events are higher-level events, often on HTML form elements that define a user interface for a web application. They include the focus event (when a text input field gains keyboard focus), the change event when the user changes the value displayed by a form element, and the submit event when the user clicks a Submit button in a form.
Some events are not triggered directly by user activity, but by network or browser activity, and indicate some kind of lifecycle or state-related change. The load event, fired on the Window object when the document is fully loaded, is probably the most commonly used of these events. The DOMContentLoaded event (discussed in §13.3.4 ) is another such event. The HTML5 history management mechanism ( §22.2 ) fires the popstate event in response to the browser’s Back button. The HTML5 offline web application API ( §20.4 ) includes online and offline events. Chapter 18 shows how to use a readystatechange event to be notified when data requested from a server is ready. Similarly, the new API for reading user-selected local files ( §22.6.5 ) uses events like “loadstart”, “progress”, and “loadend” for asynchronous notification of I/O progress.
A number of web APIs defined by HTML5 and related specifications include their own event types. The drag-and-drop API ( §17.7 ) defines events such as “drag-start”, “dragenter”, “dragover”, and “drop”. Applications that want to define custom drag sources or drop targets must handle some of these events. The HTML5andelements ( §21.2 ) define a long list of associated event types such as “waiting”, “playing”, “seeking”, “volumechange”, and so on. These events are usually only of interest to web apps that want to define custom controls for video or audio playback.
Timers and error handlers