Chapter 11: Event Handling

Overview of Events and Event Handling

An event is some notable action occurring inside the browser to which a script can respond. An event occurs when the user clicks the mouse, submits a form, or even moves the mouse over an object in the page. An event handler is JavaScript code associated with a particular part of the document and a particular event. A handler is executed if and when the given event occurs at the part of the document to which it is associated. For example, an event handler associated with a button element could open a pop-up window when the button is clicked, or a handler associated with a form field could be used to verify the data the user entered whenever the value of the form field changes.

Most events are named in a descriptive manner. It should be easy to deduce what user action the events click, submit, and mouseover correspond to. Some events are less well-named, for example, blur, which indicates a field or object has lost focus, in other words is not active. Traditionally, the handler associated with a particular action is named with the event name prefixed by “on.” For example, a handler for the click event is called onclick.

Events are not limited to basic user actions associated with the document like click and mouseover. For example, most browsers support events such as resize and load, which are related to window activity such as resizing the window or loading a document from network or disk.

Browsers provide detailed information about the event occurring through an Event object that is made available to handlers. An Event object contains contextual information about the event, for example, the exact x and y screen coordinates where a click occurred and whether the SHIFT key was depressed at the time.

Events that are the result of user actions typically have a target, the (X)HTML element at which the event is occurring. For example, a click event’s target would be the element such as <<img>> or <<p>> the user clicked on. Event handlers are therefore bound to particular elements. When the event a handler handles occurs on that element to which it is bound, the handler is executed.

Note

Browser event models are actually more flexible than this; we’ll see in later sections of this chapter how handlers can be invoked in response to actions occurring on targets contained by the element to which they’re bound.

Handlers can be bound to elements in numerous ways, including

• Using traditional (X)HTML event handler attributes, for example, <<form onsubmit="myFunction();">>

• Using script to set handlers to be related to an object, for example, document.getElementById("myForm").onsubmit = myFunction;

• Using proprietary methods such as Internet Explorer’s attachEvent() method

• Using DOM2 methods to set event listeners using a node’s addEventListener() method

Each technique has its pros and cons, and will be discussed in the following sections.

Just as there are many ways to bind events to elements, there are several ways events are triggered:

• Implicitly by the browser in response to some user- or JavaScript-initiated action

• Explicitly by JavaScript using DOM1 methods, for example,

• document.forms[0].submit()

• Explicitly using proprietary methods such as Internet Explorer’s fireEvent() method

• Explicitly by JavaScript using the DOM2 dispatchEvent() method