Event Handler Namespace in Vanilla JavaScript
In this solution I've extended the DOM to have on
and off
methods with the ability to use events namespacing:
var events = {
on(event, cb, opts){
if( !this.namespaces ) // save the namespaces on the DOM element itself
this.namespaces = {};
this.namespaces[event] = cb;
var options = opts || false;
this.addEventListener(event.split('.')[0], cb, options);
return this;
},
off(event) {
this.removeEventListener(event.split('.')[0], this.namespaces[event]);
delete this.namespaces[event];
return this;
}
}
// Extend the DOM with these above custom methods
window.on = Element.prototype.on = events.on;
window.off = Element.prototype.off = events.off;
window
.on('mousedown.foo', ()=> console.log("namespaced event will be removed after 3s"))
.on('mousedown.bar', ()=> console.log("event will NOT be removed"))
.on('mousedown.baz', ()=> console.log("event will fire once"), {once: true});
// after 3 seconds remove the event with `foo` namespace
setTimeout(function(){
window.off('mousedown.foo')
}, 3000)
Click anywhere
I think you are looking for addEventListener and removeEventListener. You can also define custom events and fire them using dispatchEvent.
However, to remove an event listener, you will need to retain a reference to the event function to remove just the function you want to remove instead of clearing the whole event.
For anyone still looking for this, I ended up making a helper singleton which keeps track of the function references for me.
class EventHandlerClass {
constructor() {
this.functionMap = {};
}
addEventListener(event, func) {
this.functionMap[event] = func;
document.addEventListener(event.split('.')[0], this.functionMap[event]);
}
removeEventListener(event) {
document.removeEventListener(event.split('.')[0], this.functionMap[event]);
delete this.functionMap[event];
}
}
export const EventHandler = new EventHandlerClass();
Then just import EventHandler and use like:
EventHandler.addEventListener('keydown.doop', () => console.log("Doop"));
EventHandler.addEventListener('keydown.wap', () => console.log("Wap"));
EventHandler.removeEventListener('keydown.doop');
// keydown.wap is still bound