Event Handler Namespace in Vanilla JavaScript

Question

I'm familiar with namespaces in jQuery's event handlers. I can add an event handler in a specific namespace:

$('#id').on('click.namespace', _handlerFunction); 

And then I can remove all event handlers in that namespace:

$('#id').off('.namespace'); 

The advantage here is that I can remove only the events in this namespace, not any user-added/additional events that should be maintained.

Does anyone have any tips on how I can not use jQuery, but achieve a similar result?

Answer 1

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 

Answer 2

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