JSFiddle - React, Tailwind, and code Playground

by Michael Stramel

HTML

<div id="parent">
    <div id="children">
        
    </div>
</div>

<div id="clicker">
CLICK
</div>

JavaScript

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

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

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

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

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

clicker.addEventListener('click', function (e) {
  children.dispatchEvent(new CustomEvent('clicky', {
    detail: {},
    bubbles: true,
    composed: true
  }));
});