js-dom-event-listeners

js-dom-event-listeners.js

// https://www.webreflection.co.uk/blog/2015/10/22/how-to-add-dom-events-listeners

// arrow function for a click
let click = (evt)=>{evt.preventDefault(); alert('CLICK')}
// arrow function add or remove
node.addEventListener('click', click);
node.removeEventListener('click', click);

// anonymous bound (WeakMap between DOM nodes and objects)
node.addEventListener('click', {
  // YES, handleEvent is standard and compatible with
  // every browser since about ever!
  handleEvent: function (e) {
    if (node.getAttribute('last-click')) return this.drop(e);
    alert('CLICKER');
  },
  // removes pretty much any listener through any event
  drop: function (e) {
    e.currentTarget.removeEventListener(
      e.type, this, e.eventPhase === e.CAPTURING_PHASE
    );
  }
});

// named function expression that removes itself
node.addEventListener('click', function click(e) {
  if (someConditionIsFalse) {
    return e.currentTarget.removeEventListener(e.type, click);
  }
});