勉強したことのメモ

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で簡単に対応

マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...

JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法

「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...

日付の範囲指定用プラグイン「DateRangePicker」の利用方法

日付型のデータを検索する際に開始・終了日のテキストボックスを用意し、それぞれにタ ...

jQueryにて指定した要素を検索条件から除外するnot()の利用方法

あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...