【脱jQuery】jQueryのliveメソッド、 onメソッドをJavaScriptだけで記述する方法

JavaScript

2020.04.162020.04.18

概要
サンプル

概要

【脱jQuery】JavaScriptだけでイベント処理を行うでは、既に存在する要素のイベントハンドラを定義したが、jQueryのonメソッド（古いバージョンではliveメソッド）は要素が後から追加された場合でもイベントハンドラが実行される。

これをJavaScriptだけで実現させる場合、以下のようにdocumentオブジェクトに対してaddEventListenerでイベントハンドラを登録する必要がある。
document.addEventListener("アクション", イベントハンドラ);

イベントハンドラ内では、イベントソースの属性値になどよって処理を分岐させる。
if (event.target.getAttribute('id') === "id属性") { // 処理 }
if (event.target.getAttribute('name') === "name属性") { // 処理 }

サンプル

document.addEventListener("click", (event) => {
  if (event.target.getAttribute('id') === 'hoge') {
    console.log('id=hogeがクリックされました。');
  }
  if (event.target.classList.contains('hoge2')) {
    console.log('class=hoge2がクリックされました。');
  }
});