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. 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 event.bubbles == true) 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 event.stopPropagation() or event.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. Legacy mechanisms to stop an event Set the event.cancelBubble to true (Internet Explorer) Set the event.returnValue property to false Canceling events A cancelable event can be canceled by calling event.preventDefault(). Canceling an event will opt out of the default browser behaviour for that event. When an event is canceled, the event.defaultPrevented property will be set to true. Canceling an event will not stop the event from traveling along the event path. 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 . There are two model types: the inline model and the traditional model. Inline model In the inline model, event handlers are added as attributes of elements. In