JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Capture Event vs Bubble Event</h3>

<ul>
  <li>Capture Event will be dispatch before Bubble Event.</li>
  <li>Event propagation order is:
    <ol>
      <li>Parent Capture</li>
      <li>Children Capture</li>
      <li>Children Bubble</li>
      <li>Parent Bubble</li>
    </ol>
  </li>
  <li><code>stopPropagation()</code> will stop the flow.</li>
</ul>

<hr>

<h4>DEMO</h4>

<div id="parent" class="click-area">
    <div id="children">
        Click
    </div>
</div>

CSS

.click-area {
  display: inline-block;
  cursor: pointer;
  margin: 3px;
  padding: 8px;
  border: solid 1px orangered;
}
.click-area > div {
  display: inherit;
  padding: inherit;
  border: dotted 1px blue;
  color: #494949;
}

JavaScript

var parent = document.getElementById('parent'),
    children = document.getElementById('children');

children.addEventListener('click', function (e) { 
    alert('Children Capture');
    // e.stopPropagation();
}, true);

children.addEventListener('click', function (e) { 
    alert('Children Bubble');
    // e.stopPropagation();
}, false);

parent.addEventListener('click', function (e) { 
    alert('Parent Capture');
    // e.stopPropagation();
}, true);

parent.addEventListener('click', function (e) { 
    alert('Parent Bubble');
    // e.stopPropagation();
}, false);