勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptで後から追加した要素にイベントを割り当てる方法と挙動の違いについて

  JavaScript

jQueryで後から追加した要素に対してイベントを割り当てる場合、いつもと異なる記述が必要になるがJavaScriptだとどうなるのか知らなかった。試したところonclick / addEventListenerどちらも動作したが微妙に挙動が異なった。その辺りをメモ。

 

対応方法

ソースコード

いずれの方法でも後から追加した要素に対してイベントの割り当てが可能。ただ、微妙に挙動が異なる。

<div id="test_area"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
document.querySelector(`#test_area`).innerHTML = `<button id="test_btn" onclick="clickFunc();">button</button>`;

function clickFunc(){
    console.log(`click 1`);
}

document.querySelector(`#test_btn`).onclick = function() {
    console.log(`click 2`);
}

document.querySelector(`#test_btn`).addEventListener(`click`, function() {
    console.log(`click 3`);
});

document.querySelector(`#test_btn`).addEventListener(`click`, function() {
    console.log(`click 4`);
});
</script>

挙動について

上記ソースコードを実行するとコンソールには「click 2」「click 3」「click 4」が表示される。

どうも1つ目のonclick属性、2つ目のclickプロパティについては上書きされる仕様みたい。そのため「click 1」が「click 2」に上書きされている。

addEventListenerの場合は上書きされず追加されるという挙動のため「click 3」「click 4」が表示される。

明確にイベントを上書きしたいという場合じゃない限りaddEventListenerを使用するのが無難かと思われる。

 - JavaScript

  関連記事

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...

Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法

Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...

VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

JavaScriptで特定の範囲内から数値が被らずにランダムに取り出す方法

1位から20位のランキング内でJavaScriptを用いてランダムに表示させたか ...

leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法

leaflet.jsとOpenStreetMapで現在位置の経度緯度を取得しマッ ...