勉強したことのメモ

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

  関連記事

jQueryにてclosestの使いどころとparent / parentsとの違いについて

あるソースコードを見ているとjQueryにてclosest()という使ったことの ...

JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法

電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...

JavaScriptにてHTML文字列をDOMノードに変換する方法

先日jQueryにて$.parseHTML()を用いてHTML文字列をDOMノー ...

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法

サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...

highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる

highcharts.jsで「棒グラフと折れ線グラフを入れる」「Y軸はそれぞれ違 ...