JSFiddle - React, Tailwind, and code Playground

by Oeslei Kuhn

HTML

<input id="teste" />
<button type="button" id="remove1">remover click.teste</button>
<button type="button" id="remove2">remover .namespace</button>
<button type="button" id="remove3">remover .teste</button>

JavaScript

var $eventControl = new EventControl();

function EventControl () { }

EventControl.prototype.add = function (event, nodes, handler) {
	var namespaces, length, i, events;

	namespaces = event.split('.');
	event = namespaces.shift();

	for (i = 0, length = nodes.length; i < length; i++) {
		// get current attachedEvents array
		events = nodes[i].attachedEvents || [];

		events.push({
			'event': event,
			'namespaces': namespaces,
			'handler': handler
		});

		// set the attachedEvents array to the element
		nodes[i].attachedEvents = events;
		nodes[i].addEventListener(event, handler);
	}
};

EventControl.prototype.remove = function (event, nodes) {
	var namespaces, length, i, events, removeEvents;

	// helper to remove events
	removeEvents = function (node, event, namespaces) {
		var i, length, j, lengthJ, removidos = 0,
			hasEvent, hasNamespace, remover = [], objRemover,
			attachedEvents = node.attachedEvents || [];

		for (i = 0, length = attachedEvents.length; i < length; i++) {
			hasEvent = hasNamespace = true;

			// filter by event name
			if (event != '*' && attachedEvents[i].event != event) {
				hasEvent = false;
			}

			// filter by namespaces
			for (j = 0, lengthJ = namespaces.length; j < lengthJ; j++) {
				if (attachedEvents[i].namespaces.indexOf(namespaces[j]) == -1) {
					hasNamespace = false; break;
				}
			}

			if (hasEvent && hasNamespace) {
				objRemover = attachedEvents[i];
				objRemover.index = i;
				remover.push(objRemover);
			}
		}

		for (i = 0, length = remover.length; i < length; i++) {
			// remove from the attachedEvents array
			attachedEvents.splice((remover[i].index - removidos++), 1);
			node.attachedEvents = attachedEvents;

			node.removeEventListener(remover[i].event, remover[i].handler);
		}
	};

	// for namespaces only
	if (event.substring(0, 1) == '.') {
		namespaces = event.substring(1, event.length).split('.');
		event = '*';
	} else {
		namespaces = event.split('.');
		event = namespaces.shift();
	}

	for (i =...