jQueryなしでイベントデリゲートを実装する

jQueryでなら書けるけど、ネイティブのJavaScriptだと書けない・・・を克服していく記録です。

jQueryでの実装

イベントのデリゲートは.on()を使用して書きます。

jQuery

$('親セレクタ').on('イベント名', '子セレクタ', (e) => {
  イベントの処理
});

jQueryなしでの実装

Element.matches()を利用して書くことができます。
Element.matches() - Web API | MDN

まず、以下の関数を用意します。

javascript

const isMatches = (elm, selector) => {
  // IE11対応  
  if (!Element.prototype.matches) {
    Element.prototype.matches = Element.prototype.msMatchesSelector;
  }
  return elm.matches(selector);
}

elm.matches(selector)はtrueかfalseを返します。
Element.matches()が使用できないブラウザ（IE11など）では、Polyfillを使用します。

javascript

document.addEventListener('イベント名', (e) => {
  let el = e.target;
  while (el && el !== '親セレクタ') {
    if (isMatches(el, '子セレクタ')) {
      イベントの処理
      break;
    }
    el = el.parentNode;
  }
}, false);

1. documentにイベントを設定、子要素で起きた全てのイベントを受け取る。
2. 実際にイベントの起きた要素からparentNodeを使い、親セレクタに当たるまで親要素を参照していく。
3. 実際にイベントの起きた要素が子要素にマッチしたら、イベントの処理を行い、親要素の参照を終了。

実装サンプル

https://codepen.io/kzmhrd/pen/XLmVpG

参考

• JavaScriptでCSSセレクタを使ったEvent Delegationの実装
• Element.matches() - Web API | MDN
• .on() | jQuery API Documentation