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);
- documentにイベントを設定、子要素で起きた全てのイベントを受け取る。
- 実際にイベントの起きた要素から
parentNodeを使い、親セレクタに当たるまで親要素を参照していく。 - 実際にイベントの起きた要素が子要素にマッチしたら、イベントの処理を行い、親要素の参照を終了。
実装サンプル
https://codepen.io/kzmhrd/pen/XLmVpG