DOM events

DOM (Document Object Model) events allow event-driven programming languages like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handlers/listeners on the element nodes inside a DOM tree, e.g. HTML, XHTML, XUL and SVG documents.

Historically, like DOM, the event models used by various web browsers had some significant differences. This caused compatibility problems. To combat this, the event model was standardized by the W3C in DOM Level 2.

Events

HTML events

Common/W3C events

There is a huge collection of events that can be generated by most element nodes:

• Mouse events ^[1][2]
• Keyboard events
• HTML frame/object events
• HTML form events
• User interface events
• Mutation events (notification of any changes to the structure of a document)
• Progress events^[3] (used by XMLHttpRequest, File API,^[4] ...)

Note that the event classification above is not exactly the same as W3C's classification.

Note that the events whose names start with “DOM” are currently not well supported, and for this and other performance reasons are deprecated by the W3C in DOM Level 3. Mozilla and Opera support DOMAttrModified, DOMNodeInserted, DOMNodeRemoved and DOMCharacterDataModified. Chrome and Safari support these events, except for DOMAttrModified.

Touch events

Web browsers running on touch-enabled devices, such as Apple's iOS and Google's Android, generate additional events.^[6]:§5.3

In the W3C draft recommendation, a TouchEvent delivers a TouchList of Touch locations, the modifier keys that were active, a TouchList of Touch locations within the targeted DOM element, and a TouchList of Touch locations that have changed since the previous TouchEvent.^[6]

Apple didn't join this working group, and delayed W3C recommendation of its Touch Events Specification by disclosing patents late in the recommendation process.^[7]

Pointer events^[8]

Web browsers on devices with various types of input devices including mouse, touch panel, and pen may generate integrated input events. Users can see what type of input device is pressed, what button is pressed on that device, and how strongly the button is pressed when it comes to a stylus pen. As of October 2013, this event is only supported by Internet Explorer 10 and 11.

Indie UI events^[9]

Not yet really implemented, the Indie UI working groups want to help web application developers to be able to support standard user interaction events without having to handle different platform specific technical events that could match with it.

Scripting usable interfaces can be difficult, especially when one considers that user interface design patterns differ across software platforms, hardware, and locales, and that those interactions can be further customized based on personal preference. Individuals are accustomed to the way the interface works on their own system, and their preferred interface frequently differs from that of the web application author's preferred interface.

For example, web application authors, wishing to intercept a user's intent to 'undo' the last action, need to "listen" for all the following events:

• control+z on Windows and Linux.
• command+z on Mac OS X.
• Shake events on some mobile devices.

It would be simpler to listen for a single, normalized request to 'undo' the previous action.

Microsoft-specific events

Two major types of events are added by Microsoft, and in some cases can only be used in Internet Explorer. Others have been implemented as de facto standards by other browsers.

• Clipboard events
• Data binding events

Note that Mozilla, Safari and Opera also support readystatechange event for the XMLHttpRequest object. Mozilla also supports the beforeunload event using traditional event registration method (DOM Level 0). Mozilla and Safari also support contextmenu, but Internet Explorer for the Mac does not.

Note that Firefox 6 and later support beforeprint and afterprint events.

XUL events

In addition to the common/W3C events, Mozilla defined a set of events that work only with XUL elements.

Other events

For Mozilla and Opera 9, there are also undocumented events known as "DOMContentLoaded" and "DOMFrameContentLoaded" which fire when the DOM content is loaded. These are different from "load" as they fire before the loading of related files (e.g., images). However, DOMContentLoaded has been added to the HTML 5 Draft Specification. The "DOMContentLoaded" event was also implemented in the Webkit rendering engine build 500+.^[10][11] This correlates to all versions of Google Chrome and Safari 3.1+. DOMContentLoaded is also implemented in Internet Explorer 9.^[12]

Opera 9 also supports the Web Forms 2.0 events "DOMControlValueChanged", "invalid", "forminput" and "formchange".

Event flow

Consider the situation when there are 2 elements nested together. Both have event handlers registered on the same event type, say "click". When the user clicks on the inner element, there are two possible ways to handle it:

• Trigger the elements from outer to inner (event capturing). This model is implemented in Netscape Navigator.
• Trigger the elements from inner to outer (event bubbling). This model is implemented in Internet Explorer and other browsers.^[13]

W3C takes a middle position in this struggle.^[14]:§1.2 Events are first captured until it reaches the target element, and then bubbled up. During the event flow, an event can be responded to at any element in the path (an observer) in either phase by causing an action, and/or by stopping the event (with method event.stopPropagation() for W3C-conforming browsers and command event.cancelBubble = true for Internet Explorer), and/or by cancelling the default action for the event.

Event object

The Event object provides a lot of information about a particular event, including information about target element, key pressed, mouse button pressed, mouse position, etc. Unfortunately, there are very serious browser incompatibilities in this area. Hence only the W3C Event object is discussed in this article.

Event handling models

DOM Level 0

This event handling model was introduced by Netscape Navigator, and remains the most cross-browser model as of 2005. There are two model types: inline model and traditional model.

Inline model

In the inline model,^[16] event handlers are added as attributes of elements. In the example below, an alert dialog box with the message "Hey Joe" appears after the hyperlink is clicked. The default click action is cancelled by returning false in the event handler.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Inline Event Handling</title>
</head>
<body>
 
	<h1>Inline Event Handling</h1>
 
	<p>Hey <a href="http://www.example.com" onclick="triggerAlert('Joe'); return false;">Joe</a>!</p>
 
	<script>
		function triggerAlert(name) {
			window.alert("Hey " + name);
		}
	</script>
</body>
</html>

One common misconception with the inline model is the belief that it allows the registration of event handlers with custom arguments, e.g. name in the triggerAlert function. While it may seem like that is the case in the example above, what is really happening is that the JavaScript engine of the browser creates an anonymous function containing the statements in the onclick attribute. The onclick handler of the element would be bound to the following anonymous function:

function () {
	triggerAlert('Joe');
	return false;
}

This limitation of the JavaScript event model is usually overcome by assigning attributes to the function object of the event handler or by using closures.

Traditional model

In the traditional model,^[17] event handlers can be added/removed by scripts. Like the inline model, each event can only have one event handler registered. The event is added by assigning the handler name to the event property of the element object. To remove an event handler, simply set the property to null:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Traditional Event Handling</title>
</head>
 
<body>
	<h1>Traditional Event Handling</h1>
 
	<p>Hey Joe!</p>
 
	<script>
		var triggerAlert = function () {
			window.alert("Hey Joe");
		};
 
		// Assign an event handler
		document.onclick = triggerAlert;
 
		// Assign another event handler
		window.onload = triggerAlert;
 
		// Remove the event handler that was just assigned
		window.onload = null;
	</script>
</body>
</html>

To add parameters:

var name = 'Joe';
document.onclick = (function (name) {
	return function () {
		alert('Hey ' + name + '!');
	};
}(name));

Inner functions preserve their scope.

DOM Level 2

The W3C designed a more flexible event handling model in DOM Level 2.^[14]

Some useful things to know :

• To prevent an event from bubbling, developers must call the "stopPropagation()" method of the event object.
• To prevent the default action of the event to be called, developers must call the "preventDefault" method of the event object.

The main difference from the traditional model is that multiple event handlers can be registered for the same event. The useCapture option can also be used to specify that the handler should be called in the capture phase instead of the bubbling phase. This model is supported by Mozilla, Opera, Safari, Chrome and Konqueror.

A rewrite of the example used in the traditional model

<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>DOM Level 2</title>
</head>
 
<body>
     <h1>DOM Level 2</h1>
 
     <p>Hey Joe!</p>
 
 
     <script>
          var heyJoe = function () {
               window.alert("Hey Joe!");
          }
 
          // Add an event handler
          document.addEventListener( "click", heyJoe, true );  // capture phase
 
          // Add another event handler
          window.addEventListener( "load", heyJoe, false );  // bubbling phase
 
          // Remove the event handler just added
          window.removeEventListener( "load", heyJoe, false );
     </script>
 
</body>
</html>

Microsoft-specific model

Microsoft does not follow the W3C model up until Internet Explorer 8, as its own model was created prior to the ratification of the W3C standard. Internet Explorer 9 follows DOM level 3 events,^[18] and Internet Explorer 11 deletes its support for Microsoft-specific model.^[19]

Some useful things to know :

• To prevent an event bubbling, developers must set the event's cancelBubble property.
• To prevent the default action of the event to be called, developers must set the event's "returnValue" property.
• The this keyword refers to the global window object.

Again, this model differs from the traditional model in that multiple event handlers can be registered for the same event. However the useCapture option can not be used to specify that the handler should be called in the capture phase. This model is supported by Microsoft Internet Explorer and Trident based browsers (e.g. Maxthon, Avant Browser).

A rewrite of the example used in the old Microsoft-specific model

<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>Microsoft-specific model</title>
</head>
<body>
     <h1>Microsoft-specific model</h1>
 
     <p>Hey Joe!</p>
 
     <script>
          var heyJoe = function () {
               window.alert("Hey Joe!");
          }
 
          // Add an event handler
          document.attachEvent("onclick", heyJoe);
 
          // Add another event handler
          window.attachEvent("onload", heyJoe);
 
          // Remove the event handler just added
          window.detachEvent("onload", heyJoe);
     </script>
 
</body>
</html>

References

• Deitel, Harvey. (2002). Internet and World Wide Web: how to program (Second Edition). ISBN 0-13-030897-8
• The Mozilla Organization. (2009). DOM Event Reference. Retrieved August 25, 2009.
• Quirksmode (2008). Event compatibility tables. Retrieved November 27, 2008.
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

External links

• Document Object Model (DOM) Level 2 Events Specification
• Document Object Model (DOM) Level 3 Events Working Draft
• DOM4: Events (Editor's Draft)
• UI Events Working Draft
• Pointer Events W3C Candidate Recommendation
• MSDN PointerEvent
• JS fiddle for Event Bubbling and Capturing

References