DOM Events |
DOM Events allow event-driven programming languages like JavaScript, JScript, ECMAScript, VBScript and Java programming language to register various event handlers/event listeners on the element nodes inside a Document Object Model tree, e.g. HTML, XHTML, XUL and Scalable Vector Graphics documents.
Historically, like DOM, the event models used by various web browsers had some significant differences. This caused incompatibity problems. Fortunately the event model was standardized by the World Wide Web Consortium in DOM Level 2.
=Events=
==HTML events==
===Common/W3C events===
There is a huge collection of events that can be registered to most element nodes: *Computer mouse events *Computer keyboard events *HTML frame/object events *HTML form events *Use interface events *Mutation events (notification of any changes to the structure of a document)
Note that the event classification above is not exactly the same as W3C s classification.
Note that the DOM* events are currently not supported by any browser, except Mozilla and Opera (web browser) which supports DOMAttrModified, DOMNodeInserted, DOMNodeRemoved and DOMCharacterDataModified.
===Microsoft-specific events===
Two major types of events are added by Microsoft and can only be used in Internet Explorer: *Clipboard events *Data binding events
Note that Mozilla, Safari (web browser) and Opera (web browser) also support readystatechange event for the XMLHttpRequest object. Mozilla also supports the beforeunload event using traditional event registration method (DOM Level 0).
==XUL events==
In addition to the common/W3C events, Mozilla defined a set of events that work only with XUL elements.
There is also an undocumented event known as DOMContentLoaded , which fires when the DOM content is loaded. This is different from load as it fires before the loading of related files (e.g. image).
=Event flow=
Considering the situtation 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.
W3C takes a middle position in this struggle. 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, 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 2 types of model: inline model and traditional model.
===Inline model===
In the inline model, event handlers are added as attribute of element. Only one event handler per event of the element is allowed. There is no way to remove the event handler from an element:
function helloWorld( name ) { window.alert( Hello + name ); }
Hello Joe!
In the example above, an alert dialog box with the message Hello Joe will appear when the hyperlink is clicked and open URI in href attribute.
The default action can be cancelled by returning false in the event handler:
function helloWorld( name ) { window.alert( Hello + name ); }
Stay here!
In the example above, the browser will not go to example.com when the hyperlink is clicked.
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 helloWorld 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 anymous function:
function() { helloWorld( 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 Closure (computer science).
===Traditional model===
In the traditional model, 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:
function helloWorld() { window.alert( Hello World ); }
// Add an event handler window.onload = helloWorld;
// Add another event handler document.onclick = helloWorld;
// Remove the event handler just added document.onclick = null;
Hello World!
To add parameters:
var name= Joe ; document.onclick = function(e) { alert( Hello + name + ! ); }
Inner functions preserve their Scope_(programming).
==DOM Level 2==
The W3C designed a more flexible event handling model in DOM Level 2.
The main difference from the traditional model is that multiple event handlers can be registered into the same event. The useCapture option can also prevent bubbling of event. It is supported by Mozilla Application Suite, Opera web browser, Safari (web browser) and Konqueror.
A rewrite of the example used in traditional model:
function helloWorld() { window.alert( Hello World ); }
// Add an event handler window.addEventListener( load , helloWorld, false ); // No bubbling
// Add another event handler document.addEventListener( click , helloWorld, true ); // Bubbling
// Remove the event handler just added document.removeEventListener( click , helloWorld, true );
Hello World!
==Microsoft-specific model==
Microsoft does not follow the W3C model. Instead, an alternative model was created.
While the model is almost idential to W3C s one, there are two important drawbacks: #Events always bubble, no capturing possibility. #The event handling function is referenced, not copied, so the this keyword always refers to the window and is completely useless.
This model is only used in Internet Explorer.
A rewrite of the example used in traditional model:
function helloWorld() { window.alert( Hello World ); }
// Add an event handler window.attachEvent( onload , helloWorld );
// Add another event handler document.attachEvent( onclick , helloWorld );
// Remove the event handler just added document.detachEvent( onclick , helloWorld );
Hello World!
=See also=
*XML Events
=References=
*Deitel, Harvey. (2002). [http://www.amazon.com/exec/obidos/ASIN/0130308978/deitelassociatin/104-4753377-1865531 Internet and World Wide Web: how to program (Second Edition)]. *XULPlanet. (2004). [http://xulplanet.com/references/elemref/ref_EventHandlers.html Event Handlers]. Retrieved February 16, 2005. *The Mozilla Organization. (2002). [http://www.mozilla.org/docs/dom/domref/dom_event_ref.html DOM Event Reference]. Retrieved February 20, 2005.
=External links=
*[http://www.w3.org/TR/DOM-Level-2-Events Document Object Model (DOM) Level 2 Events Specification]|
|