Bubbling and Capturing

Let’s start with an example.

<div onclick="alert('The handler !')">
  <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em>
</div>

If you click on EM, the handler on DIV runs.

strange? Why the handler on <div> runs if the actual click was on <em>?

Bubbling

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

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

So if we click on <p>, then we’ll see 3 alerts: p → div → form.

https://jsfiddle.net/sureshalagarsamy/40yp8mry/

Almost all events bubble.

The key word in this phrase is “almost”.

For instance, a focus event does not bubble.

The most deeply nested element that caused the event is called a target element, accessible as event.target

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.

Stop bubbling
A bubbling event goes from the target element straight up. Normally it goes upwards till <html>, and then to document object, and some events even reach window

The method for stop bubbling is event.stopPropagation().

<body onclick="alert(`the bubbling doesn't reach here`)">
  <button onclick="event.stopPropagation()">Click me</button>
</body>

https://jsfiddle.net/sureshalagarsamy/r91aokzx/

Capturing

There’s another event processing called “capturing”. It is rarely used in real code.

Normally it is invisible to us.

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

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

Let’s see it in action:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  body * {
    margin: 9px;
    border: 1px solid #FF0000;
  }
  </style>
</head>
<body>
<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>
<script>
  for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
    elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
  }
</script>
</body>
</html>

https://jsfiddle.net/sureshalagarsamy/rf3wLc5h/

Bubbling and Capturing

Bubbling

Stop bubbling

Capturing