はじめに
JavaScript 第2回 onclickでボタン押下動作
JavaScript 第3回 addEventListenerでボタン押下動作
を試したところ、onclickとaddEventListenerを両方設定したらどちらが優先されるのかなというのが気になりまして、試してみたいと思います。
今回は、Microsoft Edgeで検証しますが、Microsoft EdgeはChromiumベースであるため、Google Chromeでも同じ動作になるだろうと想像しています。
両方設定する場合動作についてはざっくり調べただけでは特に見つからなかったのですが、実装依存なのか、定義されているのかわかりませんでした。
そのため、今回の結果は、実際に検証した結果であって、他のブラウザや将来のMicrosoft Edgeでも同じ動作になるかはわかりません。
でも、普通に考えて両方設定することはないと思いますので、ただの興味です。
今回実施する内容
HTMLのボタンにonclick属性とaddEventListenerメソッドを付加し、クリックしたときにそれぞれ違う関数を実行します。
関数では同じpタグの文字を書き換えるようにします。
また、１つのボタンに２つのaddEventlistenerメソッドを付加し、それぞれ違う関数を実行し、両方とも動作するかを確認します。
ソースコード(Git Hub)
- onclickAddEventListener.html
- onclickAddEventListener.js
環境
OS: Windows 11 JP (64bit)
Microsoft Edge: バージョン 119.0.2151.58 (公式ビルド) (64 ビット)
参考
JavaScript 第2回 onclickでボタン押下動作
JavaScript 第3回 addEventListenerでボタン押下動作
用語
結論
| 検証概要 | 結果 |
|---|---|
| onClickとaddEventListener両方 | addEventListener優先 |
| addEventListener複数 | 設定可能 |
ボタンにonclick属性とaddEventListener2つを設定し、ボタンを押して関数を実行
サンプルプログラム
onclickAddEventListener.htmlのソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>addEventListener</title>
<script src="onclickAddEventListener.js" defer></script>
</head>
<body>
<input id="btn" type="button" value="実行" onClick="btnOnClick()">
<br>
結果：onclickとaddEventListenerの両方
<p id="output"></p>
結果：onclickのみ
<p id="output2"></p>
結果：addEventListenerのみ
<p id="output3"></p>
結果：addEventListener2つ目
<p id="output4"></p>
</body>
</html>
onclickAddEventListener.htmlの説明
- ヘッダー部のscriptタグには、
onclickAddEventListener.jsのスクリプトを設定する。 - inputタグで、「実行」のボタンを作成する。onclick属性で
onClick="btnOnClick()"を設定します。 - pタグは、結果を表示するために4つ用意します。
- 1つ目は、onclickとaddEventListenerを両方設定したときの確認用で、idタグを
id=outputとします。 - 2つ目は、onclickのみを設定したときの確認用で、idタグを
id=output2とします。 - 3つ目は、addEventListenerのみを設定したときの確認用で、idタグを
id=output3とします。 - 4つ目は、2つ目のaddEventListenerを設定したときの確認用で、idタグを
id=output4とします。
- 1つ目は、onclickとaddEventListenerを両方設定したときの確認用で、idタグを
onclickAddEventListener.jsのソース
document.getElementById("btn").addEventListener("click", btnClick);
document.getElementById("btn").addEventListener("click", btnClick2);
function btnClick() {
document.getElementById("output").textContent = "addEventListener";
document.getElementById("output3").textContent = "addEventListener";
};
function btnClick2() {
document.getElementById("output4").textContent = "addEventListener2つ目";
};
function btnOnClick() {
document.getElementById("output").textContent = "onclick";
document.getElementById("output2").textContent = "onclick";
};
onclickAddEventListener.jsの説明
-
document.getElementById("btn").addEventListener("click", btnClick);
onclickAddEventListener.htmlに記載したinputタグのid=btnに、addEventListenerメソッドを実装します。
addEventListenerの引数には、"click", btnClickとしました。
inputタグをクリックしたときにbtnClick関数を実行します。 -
document.getElementById("btn").addEventListener("click", btnClick2);
上記と同じボタンに、2つ目のaddEventListenerを追加します。 -
function btnClick()関数は、pタグのoutputとoutput3に「addEventListener」を設定します。 -
function btnClick2()関数は、pタグのoutput4に「addEventListener2つ目」を設定します。
=function btnOnClick関数は、pタグのoutputとoutput2に「onclick」を設定します。
結果確認
- 結果としては、画面の通りで、onclick属性とaddEventListenerでは、addEventListenerが優先されました。
onclickはonclickで動作はしているようで、pタグのoutput2では結果は出ています。
Visual Studio Codeでデバッグしながら確認したところ、やはりonClick属性の関数が先に動作し、そのあとでaddEventListenerの関数が動作しており、優先というよりは、addEventListenerの関数で上書きをしている動作でした。
また、addEventListenerについては、document.getElementById("btn").addEventListenerを記載した順番に動作するようです。したがって今回はbtnClickの次にbtnClick2が動作します。 - addEventListenerを複数設定する動作も問題なく、動作しました。
おわりに
onClick属性とaddEventListenerの同時設定、および、複数のaddEventListenerの設定の動作を確認しました。
onClick属性とaddEventListenerの同時設定は使わないだろうな・・・
複数のaddEventListenerの設定も使うかどうか、1つのボタンで全く関数を実装したいということがあればするかもしれないなというところでしょうか。