Event bubbling and capturing

1. Overview

1.1 Event Bubbling

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

1.2 Event Capturing

There’s another phase of event processing called “capturing”. It is rarely used in real code, but sometimes can be useful.

2. Event Bubbling

Description

2.1 Example

Let’s say we have 3 nested elements FORM > DIV > P with a handler on each of them:

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

A click on the inner <p> first runs onclick:

1. On that <p>.
2. Then on the outer <div>.
3. Then on the outer <form>.
4. And so on upwards till the document object.

The process is called “bubbling”, because events “bubble” from the inner element up through parents like a bubble in the water.

2.2 event.target

A handler on a parent element can always get the details about where it actually happened. The most deeply nested element that caused the event is called a target element, accessible as event.target.

Note the differences from this (=event.currentTarget):

• event.target – is the “target” element that initiated the event, it doesn’t change through the bubbling process.
• this – is the “current” element, the one that has a currently running handler on it.

2.3 Stopping bubbling

Any handler may decide that the event has been fully processed and stop the bubbling.

The method for it is event.stopPropagation().

3. Event Capturing

3.1 Event Propagation

The standard DOM Events describes 3 phases of event propagation:

1. Capturing phase – the event goes down to the element.
2. Target phase – the event reached the target element.
3. Bubbling phase – the event bubbles up from the element.

Here’s the picture of a click on <td> inside a table, taken from the specification:

That is: for a click on <td> the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.

Before we only talked about bubbling, because the capturing phase is rarely used. Normally it is invisible to us.

Handlers added using on<event>-property or using HTML attributes or using two-argument addEventListener(event, handler) don’t know anything about capturing, they only run on the 2nd and 3rd phases.

To catch an event on the capturing phase, we need to set the handler capture option to true:

elem.addEventListener(..., {capture: true})
// or, just "true" is an alias to {capture: true}
elem.addEventListener(..., true)

There are two possible values of the capture option:

• If it’s false (default), then the handler is set on the bubbling phase.
• If it’s true, then the handler is set on the capturing phase.

Note that while formally there are 3 phases, the 2nd phase (“target phase”: the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.

4. Reference

https://javascript.info/bubbling-and-capturing

http://www.tutorialspark.com/javascript/JavaScript_Event_Flow.php

https://www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/

https://medium.com/prod-io/javascript-understanding-dom-event-life-cycle-49e1cf62b2ea

https://en.wikipedia.org/wiki/DOM_events#targetText=DOM%20(Document%20Object%20Model)%20events,elements%20of%20a%20DOM%20tree.