Event Bubbling and Capturing

by Eugen Sunic

HTML

<div class="wrapper">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

CSS

* {
  outline: 1px solid green;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #41B883;
}

.outer {
  width: 200px;
  height: 200px;
  background-color: #FFC600;
}

.wrapper {
  width: 300px;
  height: 300px;
  background-color: steelblue;
}

JavaScript

const get = (selector) => document.querySelector(selector);
const $wrapper = get('.wrapper');
const $outer = get('.outer');
const $inner = get('.inner');

$wrapper.addEventListener('click', (e) => {
  alert('wrapper capturing', e.eventPhase);
});

$outer.addEventListener('click', (e) => {
  alert('outer capturing', e.eventPhase);
});

$inner.addEventListener('click', (e) => {
  alert('inner capturing', e.eventPhase);
});

/* 
e.preventDefault
e.stopImmediatePropagation
e.stopPropagation 
*/