[Event delegation] Vanilla js event delegation. This also works for complex HTML markup with overlaying children #event #delegation

_event-delegation.js

Element.prototype.on = function (eventName, selector, fn) {
  this.addEventListener(eventName, function (event) {
    const target = event.target.closest(selector)
    
    if (target && this.contains(target)) {
      return fn.call(target, event, target)
    }
  })
}

example.js

document.querySelector('body').on('click', '.item', (e, el) => {
  console.log(e);
  console.log(el);
});