JS Event Bubbling vs Capturing

An example comparing the order of events in bubbling versus capturing.

by Travis Almand

HTML

<h3>Look in your console...</h3>

<h4>bubbling</h4>
<p>Click red: 'red'<br />
Click green: 'green' 'red'<br />
Click blue: 'blue' 'green' 'red'</p>
<div id="one" class="box red">
  <div class="box green">
    <div class="box blue"></div>
  </div>
</div>

<h4>capturing</h4>
<p>Click red: 'red'<br />
Click green: 'red' 'green'<br />
Click blue: 'red' 'green' 'blue'</p>
<div id="two" class="box red">
  <div class="box green">
    <div class="box blue"></div>
  </div>
</div>

CSS

.box {
  background: white;
  border: 2px solid black;
  cursor: pointer;
  margin: 10px;
  padding: 10px;
}

.red {
  border-color: red;
}
.red:hover {
  background: red;
}

.green {
  border-color: green;
}
.green:hover {
  background: green;
}

.blue {
  border-color: blue;
}
.blue:hover {
  background: blue;
}

JavaScript

const one = document.querySelector('#one');
const two = document.querySelector('#two');

one.addEventListener('click', function (e) {
	console.log('red');
}, false);
one.querySelector('.green').addEventListener('click', function (e) {
	console.log('green');
}, false);
one.querySelector('.blue').addEventListener('click', function (e) {
	console.log('blue');
}, false);

two.addEventListener('click', function (e) {
	console.log('red');
}, true);
two.querySelector('.green').addEventListener('click', function (e) {
	console.log('green');
}, true);
two.querySelector('.blue').addEventListener('click', function (e) {
	console.log('blue');
}, true);