はじめに
JavaScript＋Microsoft Edgeを使用したスクリプト開発ということで、Webサービスを使用したスクリプトで必要そうな機能を試していこうと思います。
第2回では、onclick属性を使用してボタンを押してスクリプトを実行することを試しました。
今回は、addEventListenerメソッドで同じことをやろうと思います。
今回実施する内容
HTMLのボタンにaddEventListenerメソッドを付加し、クリックしたときに関数を実行します。
もう少し具体的には、「入力」のInputフィールドに入力して、「実行」ボタンを押すと、「結果」に、入力した値を表示します。
ソースコード(Git Hub)
- addEventListener.html
- addEventListener.js
環境
OS: Windows 11 JP (64bit)
Microsoft Edge: バージョン 119.0.2151.58 (公式ビルド) (64 ビット)
参考
EventTarget: addEventListener() メソッド
関数式
アロー関数式
用語
- 無名関数
- 関数名がなく、関数をその個所に関数を定義するもの。
- アロー関数式
- 関数記載において、functionや関数名などの記載をなくした省略した関数の書き方。
ボタンにonclick属性を設定して、ボタンを押して関数を実行
addEventListenerメソッドの動作
addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。
対象としてよくあるものは Element、Document、Window ですが、イベントに対応したあらゆるオブジェクトが対象になることができます （XMLHttpRequest など）。
とあり、要するにHTMLのButtonタグやInputタグや様々なタグに実装して、そこでのイベント（例えば、クリック）に対応して、関数を実行できると理解しました。
クリックならば、onclick属性と同じってことですね。
構文は、以下の通り。
addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)
type
イベントの種類を示す文字列で、clickとかですね。
listener
イベント発生時に通知を受け取るオブジェクトで、関数。
で、今回は一番シンプルなこの２つの引数だけを使って実装しようと思います。
サンプルプログラム
addEventListener.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="addEventListener.js" defer></script>
</head>
<body>
<input id="btn" type="button" value="実行">
<br>
<label for="value">入力</label>
<input id="value" type="text" />
<br>
結果
<p id="output"></p>
</body>
</html>
addEventListener.htmlの説明
特に説明するほどのことはないのですが・・・
- ヘッダー部のscriptタグには、
addEventListener.jsのスクリプトを設定する。 - inputタグで、「実行」のボタンを作成する。onclick属性の場合は、ここに実行する関数を記載しましたが、addEventListenerメソッドの実装は、
addEventListener.jsに記載するため、不要です。 - もうひとつのinputタグで、テキスト入力を作成し、
id="value"とする。 - pタグは、結果を表示するために使用し、idタグを
id=outputと追加する。
addEventListener.jsのソース
document.getElementById("btn").addEventListener("click", btnClick);
function btnClick() {
document.getElementById("output").textContent = document.getElementById("value").value;
};
addEventListener.jsの説明
-
document.getElementById("btn").addEventListener("click", btnClick);
addEventListener.htmlに記載したinputタグのid=btnに、addEventListenerメソッドを実装します。
addEventListenerの引数には、"click", btnClickとしました。
inputタグをクリックしたときにbtnClick関数を実行します。
インターネットの記事ではbtnClickの部分に、無名関数を使用したり、アロー関数式を使用するケースが非常に多いのですが、今回は、関数は別に定義します。 -
document.getElementById("output").textContentは、addEventListener.htmlのpタグのコンテンツを示し、そこに、document.getElementById("value").valueの値を設定します。
おわりに
addEventlistenerメソッドを使用して、JavaScriptの関数を実行するコードを記載しました。
onclick属性と同じ動作ですが、JavaScriptにaddEventListenerメソッドを記載するほうが、HTML側への影響が少なく、よさそうだなと思いました。