Vanilla JavaScript Event Delegation

Vanilla JavaScript Event Delegation

I've come up with a simple solution which seems to work rather well (legacy IE support notwithstanding). Here we extend the EventTarget's prototype to provide a delegateEventListener method which works using the following syntax:

EventTarget.delegateEventListener(string event, string toFind, function fn)

I've created a fairly complex fiddle to demonstrate it in action, where we delegate all events for the green elements. Stopping propagation continues to work and you can access what should be the event.currentTarget through this (as with jQuery).

Here is the solution in full:

(function(document, EventTarget) {
  var elementProto = window.Element.prototype,
      matchesFn = elementProto.matches;

  /* Check various vendor-prefixed versions of Element.matches */
  if(!matchesFn) {
    ['webkit', 'ms', 'moz'].some(function(prefix) {
      var prefixedFn = prefix + 'MatchesSelector';
      if(elementProto.hasOwnProperty(prefixedFn)) {
        matchesFn = elementProto[prefixedFn];
        return true;
      }
    });
  }

  /* Traverse DOM from event target up to parent, searching for selector */
  function passedThrough(event, selector, stopAt) {
    var currentNode = event.target;

    while(true) {
      if(matchesFn.call(currentNode, selector)) {
        return currentNode;
      }
      else if(currentNode != stopAt && currentNode != document.body) {
        currentNode = currentNode.parentNode;
      }
      else {
        return false;
      }
    }
  }

  /* Extend the EventTarget prototype to add a delegateEventListener() event */
  EventTarget.prototype.delegateEventListener = function(eName, toFind, fn) {
    this.addEventListener(eName, function(event) {
      var found = passedThrough(event, toFind, event.currentTarget);

      if(found) {
        // Execute the callback with the context set to the found element
        // jQuery goes way further, it even has it's own event object
        fn.call(found, event);
      }
    });
  };

}(window.document, window.EventTarget || window.Element));

Vanilla JS event delegation - dealing with child elements of the target element

Alternate Solution:

MDN: Pointer events

Add a class to all nested child elements (.pointer-none)

.pointer-none {
  pointer-events: none;
}

Your mark-up becomes

<div id="quiz">
    <button id="game-again" class="game-again">
        <span class="icon-spinner icon pointer-none"></span>
        <span class="pointer-none">Go again</span>
    </button>
</div>

With the pointer set to none, the click event wouldn't fire on those elements.

https://css-tricks.com/slightly-careful-sub-elements-clickable-things/

Vanilla JavaScript event delegation when dealing with Web Components

If the shadow DOM mode is open, it is possible to get the inner element clicked with the help of the Event.composedPath() method, which will return the array of the nodes crossed (innest node first).

document.addEventListener('click', oEvent => {
    result.innerText = oEvent.composedPath()[0].tagName;
}, true);

This method replaces the old Event.path property.

customElements.define('custom-el', class extends HTMLElement {  constructor() {    super();    this._shadowRoot = this.attachShadow({ mode: 'open' });    const oInnerDiv = document.createElement('div');    oInnerDiv.classList.add('inner');    oInnerDiv.style.border = '2px solid blue';    oInnerDiv.style.padding = '1rem';  this._shadowRoot.appendChild(oInnerDiv);        }});
document.addEventListener('click', oEvent => {  result.innerText = oEvent.composedPath()[0].tagName;});

html { box-sizing: border-box;}
*,*::before,*::after { box-sizing: inherit;}
body { margin: 0; padding: 0;}
main,div,custom-el { display: inline-block; border: 2px solid black; padding: 1rem;}

<main>    <custom-el></custom-el></main>  <p id="result"></p>

JQuery event delegation in vanilla js

I was thinking about this all wrong and overthought it. Here is the refactored version for anyone else that runs into this issue

document.addEventListener('click', e => {
   if (e.target.closest('.swatch')) {
      const $swatch = e.target.closest('.swatch')
      document.querySelector(`.product-form .swatch[data-value="${$swatch.dataset.value}"]`).click()

      $swatch.closest('.swatches .swatch').classList.remove('selected')
      $swatch.classList.add('selected')
   }
})

Event delegation with vanilla JS

Just add a listener to the .list-container instead, and on click, check to see if the target matches the .btn:

const detailsContainer = document.querySelector('.details');document.querySelector('.list-container').addEventListener('click', ({ target }) => {  if (target.matches('.btn')) detailsContainer.classList.toggle('visible');});

.details { display: none }.visible { display: block }

<div class='list-container'>container outside of button  <button class="btn">More details </button></div>
<div class="details">Lorem ipsum lorem ipsum lorem ipsum</div>

mouseenter delegation using vanilla JavaScript?

You have to add the event listener on capturing phase, passing true as third argument:

document.body.addEventListener("mouseenter", function(e) {
    if(e.target.className === "demo") {
        console.log("catched");
    }
},true); // capturing phase

You can do something of more elaborated in order to catch the selector. But that's the key.

Demo here https://codepen.io/anon/pen/Xqaxwd

---

Related Topics