jQueryの「$(document).on('click', '.class'…」をピュアJavaScriptで書きたい

こんにちは、さち です。

先日、Tampermonkey でユーザースクリプト（JavaScript）を書いている時に、後から追加した要素でもクリックイベントを発動したくて、jQuery の $(document).on('click', '.class', … を使いたいことがありました。

ただ、短く簡単なスクリプトなので、わざわざ jQuery を使うのは微妙です。

ピュアな JavaScript（Vanilla JS）だけでどう書けば良いの……？

jQuery でなく JavaScript で書きたい

「jQuery」で、on() を使って document にイベントをセットする方法は、後から追加した要素でもイベントを発動させたいときに使われます。

簡単に書くと、実際のソースはこんな感じです。

<div class="wrap">
  <button class="friends">たーのしー！</button>
</div>

<button class="push">追加</button>

//「.friends」のボタンをクリックしたらダイアログを表示
$(document).on('click', '.friends', function() {
  const txt = $(this).text();
  alert(txt);
});

//「追加」をクリックすると「.friends」を持つ「わーい！」ボタンを追加
$('.push').click(function() {
  const $btn = $('<button>').addClass('friends').text('わーい！');
  $('.wrap').append($btn).trigger('create');
});

「追加」ボタンをクリックすると、クラスの .friends を持つ「わーい！」ボタンが追加れますが、on() を使って document にイベントをセットしているので、後から追加したボタンでもクリックイベントを発動できます。

この仕組みについては、下記の記事で書いているので、詳細を知りたい方は読んでみて下さい。

jQuery：追加した「ボタン」をクリックしてもイベントが発火しない

こんにちは、さち です。先日、「スクフェス ツールズ」をいじっているときにjQuery で要素（入力欄）を動的に追加したんですがその追加した要素に設定しているイベントが発火せずハマりました。解決方法はそんなに難しくないですが知らないとどうし

at.sachi-web.com

2017.02.20

ただ、場合によっては jQuery を使えない（使いたくない）ときもあります。ピュアな JavaScript だけで同じことをするには、どうしたらいいの……？

解決方法

//jQuery
$(document).on('click', '.friends', function() {
  const txt = $(this).text();
  alert(txt);
});

//JavaScript で書き換えるとこんな感じ
document.addEventListener('click', function(e) {
  if(e.target.classList.contains('friends')) {
    const txt = e.target.innerText
    alert(txt);
  }
}, false);

addEventListener 内の function の引数 e には、発生したイベントの情報を持つ「オブジェクト」が渡されます。今回の場合、「クリックイベント」の情報ですね。

e.target に、クリックされた要素に関する情報が入っています。

さらに classList でその要素が持つクラスの一覧を取得でき、contains('.friedns') で friends クラスを持っているか判定できます。持っている場合は true 、持っていない場合は false が返ってくるので、これを使って if の条件分岐をします。

「e.target」が持つ情報

今回は、イベントの情報として「クラス名」を使いましたが、その他の情報を使いたいこともあると思うので、いくつか書いておきます。

基本的に、「要素オブジェクト」で使えるものと同じです。

他のものも知りたい場合は、console.log( e.target ) で中身を見て、持っている情報を確認してみて下さい。