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

概要

【脱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がクリックされました。');
  }
}); 

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。