JSFiddle - React, Tailwind, and code Playground

by Vincent Maglione

HTML

<main id="content">
  <div id="b1" class="box">
  1
    <div id="b2" class="box">
    2
      <div id="b3" class="box">
        3
      </div>
    </div>
  </div>
</main>

<footer>
  <p id="clickMsg">
    No clicks
  </p>
</footer>

SCSS

* {
  box-sizing: border-box;
}

#content {
  width: 100%;
}

.box {
  border: 1px solid rgba(0,0,0,0.2);
  padding: 2em;
  text-align: center;
  width: 100%;
  
  &:hover {
    background: rgba(0,0,0,0.1);
  }
}

JavaScript

var content = document.getElementById('content'),
    boxes = document.getElementsByClassName('box'),
    clickMsg = document.getElementById('clickMsg'),
    msg = '';

var handleClicks = function(e) {
  clickMsg.innerHTML = msg;
  var phase = e.eventPhase;
  
  if (1 === phase) {
    phase = 'Capturing';
  } else if (2 === phase) {
    phase = 'At Target';
  } else if (3 === phase) {
    phase = 'Bubbling'
  }
  
  msg += e.target.id.toString() + ' phase: ' + phase + '<br>';
  
  clickMsg.innerHTML = msg;
}

var handleBubbles = function(e) {
  msg += e.target.id.toString() + ' clicked, ' + this.id + ' listening<br>'
  
  clickMsg.innerHTML = msg
}

var setupListeners = function(els) {
	for (var i = els.length - 1; i > -1; i--) {
    var el = els[i];
    el.addEventListener('click', handleClicks, false);
  }
  
  content.addEventListener('click', handleBubbles, false)
}(boxes);