This article has multiple issues. Please helpimprove it or discuss these issues on thetalk page.(Learn how and when to remove these messages) This articlecontainsinstructions, advice, or how-to content. Please helprewrite the content so that it is more encyclopedic ormove it toWikiversity,Wikibooks, orWikivoyage.(July 2018) This articlemay be too technical for most readers to understand. Pleasehelp improve it tomake it understandable to non-experts, without removing the technical details.(July 2018) (Learn how and when to remove this message) (Learn how and when to remove this message)

DOM (Document Object Model) Events are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser.^[1]Client-side scripting languages likeJavaScript,JScript,VBScript, andJava can register variousevent handlers orlisteners on the element nodes inside aDOM tree, such as inHTML,XHTML,XUL, andSVG documents.

Examples of DOM Events:

• When a user clicks the mouse
• When a web page has loaded
• When an image has been loaded
• When the mouse moves over an element
• When an input field is changed
• When an HTML form is submitted
• When a user presses a key^[2]

Historically, like DOM, the event models used by variousweb browsers had some significant differences which caused compatibility problems. To combat this, the event model was standardized by theWorld Wide Web Consortium (W3C) in DOM Level 2.

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

• Mouse events.^[3][4]
• 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^[5] (used byXMLHttpRequest and File API^[6]).

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 andOpera supportDOMAttrModified,DOMNodeInserted,DOMNodeRemoved andDOMCharacterDataModified.Chrome andSafari support these events, except forDOMAttrModified.

Web browsers running ontouch-enabled devices, such as Apple'siOS and Google'sAndroid, generate additional events.^[9]: §5.3

In theW3C draft recommendation, aTouchEvent delivers aTouchList ofTouch locations, themodifier keys that were active, aTouchList ofTouch locations within the targeted DOM element, and aTouchList ofTouch locations that have changed since the previousTouchEvent.^[9]

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

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.^[11]

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.^[12]

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.

In addition to the common (W3C) events, two major types of events are added byInternet Explorer. Some of the events have been implemented asde facto standards by other browsers.

• Clipboard events.
• Data binding events.^{[clarification needed]}

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

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

In addition to the common (W3C) events, Mozilla defined a set of events that work only withXUL elements.^{[citation needed]}

For Mozilla and Opera 9, there are also undocumented events known asDOMContentLoaded andDOMFrameContentLoaded 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 theHTML 5 specification.^[13]The DOMContentLoaded event was also implemented in theWebkit rendering engine build 500+.^[14][15] This correlates to all versions ofGoogle Chrome andSafari 3.1+. DOMContentLoaded is also implemented inInternet Explorer 9.^[16]

Opera 9 also supports the Web Forms 2.0 eventsDOMControlValueChanged,invalid,forminput andformchange.

Consider the situation when two event targets participate in atree. Both have event listeners 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 inNetscape Navigator.
• Trigger the elements from inner to outer (event bubbling). This model is implemented in Internet Explorer and other browsers.^[17]

W3C takes a middle position in this struggle.^{[18]: §1.2}

According to the W3C, events go through three phases when an event target participates in a tree:

1. The capture phase: the event travels down from the root event target to the target of an event
2. The target phase: the event travels through the event target
3. The bubble phase (optional): the event travels back up from the target of an event to the root event target. The bubble phase will only occur for events that bubble (whereevent.bubbles == true)

You can find a visualization of this event flow athttps://domevents.dev

While an event is travelling through event listeners, the event can be stopped withevent.stopPropagation() orevent.stopImmediatePropagation()

• event.stopPropagation(): the event is stopped after all event listeners attached to the current event target in the current event phase are finished
• event.stopImmediatePropagation(): the event is stopped immediately and no further event listeners are executed

When an event is stopped it will no longer travel along the event path. Stopping an event does not cancel an event.

• Set theevent.cancelBubble totrue (Internet Explorer)
• Set theevent.returnValue property tofalse

Acancelable event can be canceled by callingevent.preventDefault(). Canceling an event will opt out of the default browser behaviour for that event. When an event is canceled, theevent.defaultPrevented property will be set totrue. Canceling an event will not stop the event from traveling along the event path.

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.

This event handling model was introduced byNetscape Navigator, and remains the most cross-browser model as of 2005^[update].^{[citation needed]} There are two model types: the inline model and the traditional model.

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

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

One common misconception^{[citation needed]} with the inline model is the belief that it allows the registration of event handlers with custom arguments, e.g.name in thetriggerAlert function. While it may seem like that is the case in the example above, what is really happening is that theJavaScript engine of the browser creates ananonymous function containing the statements in theonclick attribute. Theonclick handler of the element would be bound to the following anonymous function:

function(){triggerAlert('Joe');returnfalse;}

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

In the traditional model,^[21] event handlers can be added or 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><htmllang="en"><head><metacharset="utf-8"><title>Traditional Event Handling</title></head><body><h1>Traditional Event Handling</h1><p>Hey Joe!</p><script>vartriggerAlert=function(){window.alert("Hey Joe");};// Assign an event handlerdocument.onclick=triggerAlert;// Assign another event handlerwindow.onload=triggerAlert;// Remove the event handler that was just assignedwindow.onload=null;</script></body></html>

To add parameters:

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

Inner functions preserve theirscope.

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

Some useful things to know :

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

The main difference from the traditional model is that multiple event handlers can be registered for the same event. TheuseCapture 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 byMozilla,Opera,Safari,Chrome andKonqueror.

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

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

Some useful things to know :

• To prevent an event bubbling, developers must set the event'scancelBubble property.
• To prevent the default action of the event to be called, developers must set the event'sreturnValue property.
• Thethis keyword refers to the globalwindow object.

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

<!doctype html><htmllang="en"><head><metacharset="utf-8"><title>Internet Explorer-specific model</title></head><body><h1>Internet Explorer-specific model</h1><p>Hey Joe!</p><script>varheyJoe=function(){window.alert("Hey Joe!");}// Add an event handlerdocument.attachEvent("onclick",heyJoe);// Add another event handlerwindow.attachEvent("onload",heyJoe);// Remove the event handler just addedwindow.detachEvent("onload",heyJoe);</script></body></html>

• 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/

• 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
• domevents.dev - A visualizer to learn about DOM Events through exploration
• JS fiddle for Event Bubbling and Capturing

• World Wide Web Consortium standards
• Application programming interfaces
• Events (computing)

• Webarchive template wayback links
• CS1 maint: bot: original URL status unknown
• Articles with short description
• Short description matches Wikidata
• Articles needing cleanup from July 2018
• All pages needing cleanup
• Articles containing how-to sections
• Wikipedia articles that are too technical from July 2018
• All articles that are too technical
• Articles with multiple maintenance issues
• Wikipedia articles needing clarification from April 2012
• All articles with unsourced statements
• Articles with unsourced statements from April 2017
• Articles containing potentially dated statements from 2005
• All articles containing potentially dated statements
• Articles with unsourced statements from September 2012