JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div>
  <button>Click me</button>
</div>

JavaScript

function log(msg) {
  const p = document.createElement('p');
  p.innerHTML = msg;
  document.body.appendChild(p);
}

function clear() {
  document.querySelectorAll('p').forEach(el => el.remove());
}

function logEvent(e) {
  let phase;
  switch (e.eventPhase) {
    case e.CAPTURING_PHASE:
      phase = 'capture';
      break;
    case e.AT_TARGET:
      phase = 'target';
      break;
    case e.BUBBLING_PHASE:
      phase = 'bubble';
      break;
  }
  log(`
    <tt>${e.type}</tt> event
    on <tt>${e.currentTarget.tagName.toLowerCase()}</tt>
    during <b>${phase}</b> phase,
    target is <tt>${e.target.tagName.toLowerCase()}</tt>
  `);
}

const body = document.body;
const div = document.querySelector('div');
const btn = document.querySelector('button');

body.addEventListener('click', logEvent);
body.addEventListener('click', logEvent, true);
div.addEventListener('click', logEvent);
div.addEventListener('click', logEvent, true);
btn.addEventListener('click', logEvent);
btn.addEventListener('click', logEvent, true);

document.documentElement.addEventListener('click', e => {
  if (e.target === btn) {
    clear();
  }
}, true);