Open main menu
Home
Random
Recent changes
Special pages
Community portal
Preferences
About Wikipedia
Disclaimers
Incubator escapee wiki
Search
User menu
Talk
Dark mode
Contributions
Create account
Log in
Editing
DOM event
(section)
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
== Event flow == Consider the situation when two event targets participate in a [https://dom.spec.whatwg.org/#trees tree]. 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 in [[Netscape Navigator]]. * Trigger the elements from inner to outer ([[event bubbling]]). This model is implemented in Internet Explorer and other browsers.<ref name="quirksmode">{{cite web |url= http://www.quirksmode.org/js/introevents.html |title= Introduction to Events |publisher= Quirksmode.org |access-date= 15 September 2012 }}</ref> W3C takes a middle position in this struggle.<ref name="dom2-events">{{cite web |url= http://www.w3.org/TR/DOM-Level-2-Events/ |title= Document Object Model (DOM) Level 2 Events Specification |date= 13 November 2000 |publisher= [[W3C]] |access-date= 15 September 2012 }}</ref>{{rp|Β§1.2}} According to the W3C, events go through three phases when an event target participates in a tree: # The capture phase: the event travels down from the root event target to the target of an event # The target phase: the event travels through the event target # 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 (where <code>event.bubbles == true</code>) You can find a visualization of this event flow at https://domevents.dev === Stopping events === While an event is travelling through event listeners, the event can be stopped with <code>event.stopPropagation()</code> or <code>event.stopImmediatePropagation()</code> * <code>event.stopPropagation()</code>: the event is stopped after all event listeners attached to the current event target in the current event phase are finished * <code>event.stopImmediatePropagation()</code>: 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. ==== Legacy mechanisms to stop an event ==== * Set the <code>event.cancelBubble</code> to <code>true</code> (Internet Explorer) * Set the <code>event.returnValue</code> property to <code>false</code> === Canceling events === A <code>cancelable</code> event can be canceled by calling <code>event.preventDefault()</code>. Canceling an event will opt out of the default browser behaviour for that event. When an event is canceled, the <code>event.defaultPrevented</code> property will be set to <code>true</code>. Canceling an event will not stop the event from traveling along the event path.
Edit summary
(Briefly describe your changes)
By publishing changes, you agree to the
Terms of Use
, and you irrevocably agree to release your contribution under the
CC BY-SA 4.0 License
and the
GFDL
. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.
Cancel
Editing help
(opens in new window)