JSFiddle - React, Tailwind, and code Playground

by DamonOehlman

HTML

<html>
<body>
    <ul id="status"></ul>
    <div id="div1">
        <div id="div2">
            <button id="btnAdd">Add</button>
            <button id="btnRemove">Remove</button>
        </div>
    </div>
</body>
</html>

JavaScript

var button = document.getElementById('btnAdd'),
    div = document.getElementById('div1'),
    lastTarget;                

button.addEventListener('click', handleEvent('button'), true);
div.addEventListener('click', handleEvent('div'), true);
document.addEventListener('click', handleEvent('document'), true);
window.addEventListener('click', handleEvent('window'), true);

function handleEvent(eventName) {
    return function(evt) {
        if (evt.target !== lastTarget) {
            $('#status').html('');
        }
        
        $('#status').append('<li>' + eventName + ': ' + evt.target.id + '</li>');
        lastTarget = evt.target;
    }
}