JSFiddle - React, Tailwind, and code Playground

by blparker

HTML

<button id="addNew">Add New</button>

CSS

.foo { border: 1px solid blue; }

JavaScript

document.getElementById("addNew").addEventListener("click", function(e) {
  //addEl('div', 'foo', 'bar');
  var div = document.createElement('div');
  div.className = 'foo';
  div.innerHTML = 'Bar';
  document.body.appendChild(div);
});

/* Hack-y stuff */
var handlers = [];

function handle(elem) {
  var event = arguments[0];
  for(var current = event.target; current != this; current = current.parentNode || this) {
    for(var i = 0; i < handlers.length; i++) {
      if(handlers[i].clazz == current.className) {
        handlers[i].fn.apply(current);
      }
    }
  }
}
      
function on(context, clazz, event, fn) {
  
  var handler = function(e) {
    handle.apply(context, arguments);
  };
  
  context.addEventListener(event, handler);
  
  var obj = {
    clazz : clazz,
    event : event,
    fn : fn
  };
  handlers.push(obj);
}

/* Call that ish */
on(document, 'foo', 'click', function(e) {
  console.log("### CLICK ON FOO");
});