勉強したことのメモ

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で年齢計算

JavaScriptで年齢計算。 ■ソース function ageCalcul ...

HTMLとJavaScriptのソースコードの暗号化(難読化)

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

さくらのレンタルサーバでCookieが正常に保存できない場合の対応方法

さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...

CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法

CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...