こんにちは、さち です。
先日、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 を使えない(使いたくない)ときもあります。ピュアな 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 )
で中身を見て、持っている情報を確認してみて下さい。
コメント