JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div>
  <button>test</button>
  <span data-click="">span</span>
</div>

JavaScript

/*
document.addEventListener("click", function(e) {
  console.log(e.target);
  console.log(e.currentTarget);
});


$(document).on('click', 'div', function(e) {
	console.log(e.target);
  console.log(e.currentTarget);
});
*/



document.body.addEventListener("click", delegate("[data-click]", trigger));

function trigger(event) {
  console.log("clicked on '%s'", this.textContent);
  
  //var node = document.createElement("span");
  //var textnode = document.createTextNode("another");
  //node.appendChild(textnode); 
  //node.insertAdjacentHTML( 'beforeend', 'test' );
  //document.body.appendChild(node);
  document.body.insertAdjacentHTML( 'beforeend', '<span>test test</span>' );
}

function delegate(selector, handler) {
  return function(event) {
    var targ = event.target;
    do {
      if (targ.matches(selector)) {
        handler.call(targ, event);
      }
    } while ((targ = targ.parentNode) && targ != event.currentTarget);
  }
}

/*
var tid = setInterval( function () {
    if ( document.readyState !== 'complete' ) return;
    clearInterval( tid );     
    alert('done');
    document.body.addEventListener("click", function() {
      alert();
    });
}, 100 );
*/