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

この記事は約4分で読めます。
記事内に広告が含まれています

コーディングのイメージ

こんにちは、さち です。

先日、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 を使えない(使いたくない)ときもあります。ピュアな JavaScript だけで同じことをするには、どうしたらいいの……?

解決方法

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

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

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

e.target に、クリックされた要素に関する情報が入っているので、その要素が .friends を持っているか調べます。「クラス名」は、e.target.className で取得できるので、e.target.className === 'friends' で判定します。

「e.target」が持つ情報

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

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

id e.target.id
クラス e.target.className クラス名の一覧を文字列で取得
e.target.classList クラス名の一覧を配列で取得
タグ e.target.tagName
data属性 e.target.dataset data- より後をキーにした連想配列
href属性 e.target.href
type属性 e.target.type
name属性 e.target.name
属性 e.target.attributes 属性名をキーにした連想配列
テキスト e.target.innerText

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

コメント

タイトルとURLをコピーしました