JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css&quot; integrity=&quot;sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<span style="color: red; padding-left: 5px">#container</span>
<div id="container">
  <p>
    Current target: container
  </p>
  <p>
    Target: btn
  </p>
  <span style="color: gray">#btn</span>
  <button type="button" class="btn btn-default btn-lg" id="button">
    <p>
      Current target: btn
    </p>
    <p>
      Target: btn
    </p>
  </button>
</div>

CSS

#container {
  width: 200px;
  margin: 10px;
  padding: 10px;
  box-shadow: inset 0 0 0 1px red;
}

JavaScript

var body = document.body;
var btn = document.getElementById('button');
var container = document.getElementById('container');
container.addEventListener('click', function(event) {
  if (event.currentTarget === container) {
    alert("container event listener: current target: container");
  } else {
    alert("container event listener: current target: NOT container");
  }
  if (event.target === btn) {
    alert("container event listener: target: btn");
  } else {
    alert("container event listener: target: NOT btn");
  }
}, false);
btn.addEventListener('click', function(event) {
  if (event.currentTarget === btn) {
    alert("btn event listener: current target: btn");
  } else {
    alert("btn event listener: current target: NOT btn");
  }
  if (event.target === btn) {
    alert("btn event listener: target: btn");
  } else {
    alert("btn event listener: target: NOT btn");
  }
}, false);