**Event bubbling** is a way of event propagation in the HTML DOM. It relates to the order in which events are propagated in nested elements. 

<br/>
<br/>

In bubbling, when an event happens, the handler of the innermost element runs, then the parents, and then the further ancestor elements. In other words, events bubble up or propagate the DOM tree upwards.

> Note: All events bubble up with a few exceptions, ​like `focus`.   To prevent an event from bubbling up, you can use `event.stopPropagation()`.

# Example

Consider the four nested elements: `body`, `article`, `div`, and `p`.  

Clicking on the p element calls the `onclick` event handlers in the order:  
`p` →  `div` →  `article`.

Notice, we used `event.stopPropagation()` inside the `article` to prevent an event from bubbling up to the `body` element.

#ancestor, #parent, #child {
    border: 2px solid #7EA6E0;
    padding: 5px;
}
#parent {
    border: 2px solid #FFB570;
}
#child {
    border: 2px solid #97D077;
}

<html>
  <head></head>
  <body onclick="console.log('body handler called.');">

    <article id="ancestor" onclick="console.log('article handler called.'); event.stopPropagation()">
      article element

      <div id="parent" onclick="console.log('div handler called.')">
        div element

        <p id="child" onclick="console.log('p handler called.')">
          p element
        </p>

      </div>

    </article>
  </body>
</html>


codemirror

console

A similar principle to event bubbling is **event capturing**, where events propagate inwards instead of outwards. Event bubbling and event capturing lay the foundation of [event delegation](https://www.educative.io/answers/what-is-event-delegation-in-javascript).

JavaScript event bubbling

Event bubbling is a way of event propagation in the HTML DOM. It relates to the order in which events are propagated in nested elements. 