勉強したことのメモ

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

  関連記事

JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法

ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...

JavaScriptにてページ内のスクロール可能な要素を最後までスクロールしないとボタンをクリックできないようにする方法

お問い合わせページ等で「個人情報の取扱いについて」のような長い文章があり、その部 ...

Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法

Leafletにて何らかのボタンをクリックすると表示されているマップを画像として ...

jQueryでループを抜けようと(breakしようと)するとエラーになる際の対応方法

jQueryでループを抜けようと(breakしようと)すると「Uncaught ...