event object

by t2t2

HTML

<div id="target-1" data-log="log-1" class="target">
  Target 1
  <div id="target-2" data-log="log-2" class="target">
    Target 2
    <div id="target-3" data-log="log-3" class="target">
      Target 3
      <br />
      <button id="target-4" data-log="log-4" class="target">
        Innermost target
      </button>
    </div>
  </div>
</div>

<div class="logs">
  <div id="log-1" class="log">log-1</div>
  <div id="log-2" class="log">log-2</div>
  <div id="log-3" class="log">log-3</div>
  <div id="log-4" class="log">log-4</div>
</div>

CSS

.target {
  padding: 1rem;
  border: 1px solid #000;
}
.logs {
  margin-top: 2rem;
  display: grid;
  grid: auto-flow / repeat(2, 1fr);
  grid-gap: 1rem;
}
.log {
  height: 100px;
  border: 1px solid #000;
  overflow-y: scroll;
  font-family: monospace;
  padding: 0.5rem;
}

JavaScript

let counter = 1;
function listener(event) {
	// tag event object with identifier
	if (!event.identifier) {
  	event.identifier = counter++;
  }

  document.getElementById(this.dataset.log).innerText += `\n${Date.now()} - eventObj ${event.identifier}`
}

document.querySelectorAll('.target').forEach(el => el.addEventListener('click', listener));

// example clicks
document.getElementById('target-4').click();
document.getElementById('target-3').click();

// synthetically dispatched event, would share id. Probably wrothy tradeoff
const ev1 = new Event('click', {bubbles: true});
document.getElementById('target-2').dispatchEvent(ev1);
document.getElementById('target-2').dispatchEvent(ev1);

// And now try clicking ->