JSFiddle - React, Tailwind, and code Playground

by prometh

HTML

<div id="container"><span>asdf</span></div>

CSS

#container {
    background: black;
    display: inline-block;
    padding: 3rem;
}

#container > span {
    background: red;
    color: yellow;
}

JavaScript

function a() {
    this.b = new a.b();
    this.b.bind("click", function(event){ console.log("yup-A") });
}

a.b = function() {
    this.c = new a.b.c();
    this.bind("click", function(event){ console.log("yup-B") });
}
a.b.prototype.bind = function() {
    this.c.bind.apply(this, arguments);
}

a.b.c = function(){}
a.b.c.prototype.bind = function(event, handler) {
    $on("#container", event, "span", handler);
}



// Simulating jQuery.fn.on(event, selector, handler)

window.$on = function(target, type, selector, handler) {
	if (typeof target == "string") target = $qsa(target);
	if (target instanceof NodeList) {
		for (var i=target.length-1; i>=0; i--) {
			$on.$on(target[i], type, selector, handler);
		}
	} else {
		$on.$on(target, type, selector, handler);
	}
}

window.$on.$on = function(target, type, selector, handler) {
	if (typeof selector == "function") {
		handler = selector;
		selector = null;
	}
	
	if (selector) {
		target.addEventListener(type, function(event) {
			nodes = $qsa(selector);
			
			for (var i=nodes.length; i>=0; i--) {
				if (nodes[i] === event.target) {
					handler.apply(this, [event]);
				}
			}
		});
	} else {
		target.addEventListener(type, handler);
	}
}

window.$qsa = function(selector, scope) {
	return (scope || document).querySelectorAll(selector);
}



new a();