Managing your own DOM event handlers in JS

event_handlers.js

/* Data structure to hold our event handlers. It's important that when you
   remove an element from the DOM that you delete its associated event
   handler id to avoid memory leaks.

  {
    12345: { // DOM element's event handler id
      click: [
        function(event) { ... },
      ]
    },
  }
*/
const events = {}

function eventHandler(event) {
  event.target.eventHandlerID || event.target.eventHandlerID = Math.random()
  const handlerID = event.target.eventHandlerID
  events[handlerID] || events[handlerID] = {}
  events[handlerID][event.type] || events[handlerID][event.type] = []

  events[handlerID][event.type].forEach(handler => handler(event))
}

document.addEventListener('click', eventHandler)