8.4 イベント処理
ユーザーの操作（クリック、キー入力など）に反応する処理を学びます。
8.4.1 addEventListener の使い方
addEventListener は、要素に対してイベントリスナーを登録するメソッドです。
基本構文
要素.addEventListener("イベント名", function() {
// イベント発生時の処理
});
8.4.2 イベントオブジェクトと preventDefault
イベントが発生すると、そのイベントの情報を持つ「イベントオブジェクト」が自動的に生成されます。
button.addEventListener("click", function(event) {
console.log(event.target); // クリックされた要素
console.log(event.type); // "click"
});
preventDefault
フォームの送信やリンクのページ遷移など、ブラウザのデフォルト動作をキャンセルします。
form.addEventListener("submit", function(event) {
event.preventDefault(); // フォーム送信をキャンセル
// 独自の処理を実行
});
8.4.3 イベント処理のプログラム
ソースフォルダ：public/ch08
ファイル名：event-handler.js
➢ event-handler.html
前の項で作った ch08/dom-style.html をコピーし、ch08 にペーストしてください。その際に、ファイル名を event-handler.html に変更します。ファイル内の dom-style.html や dom-style.js の記述も、event-handler.html や event-handler.js に修正します。さらに、ファイル内の記述を以下のように修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習: event-handler.jsを実行中</title>
</head>
<body>
<h1>イベント処理の練習</h1>
<input type="text" id="nameInput" placeholder="名前を入力">
<button id="greetBtn">挨拶する</button>
<p id="output"></p>
<script src="event-handler.js"></script>
</body>
</html>
➢ event-handler.js
// event-handler.js
// 要素を取得
const input = document.querySelector("#nameInput");
const button = document.querySelector("#greetBtn");
const output = document.querySelector("#output");
// ボタンクリック時の処理
button.addEventListener("click", function(event) {
// 入力された名前を取得
const name = input.value;
// 名前が空でないかチェック
if (name === "") {
alert("名前を入力してください");
return;
}
// 挨拶メッセージを表示
output.textContent = `こんにちは、${name}さん！`;
// コンソールにイベント情報を表示
console.log("クリックされた要素:", event.target);
console.log("イベントの種類:", event.type);
});
// Enter キーでも挨拶できるようにする
input.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
button.click(); // ボタンのクリックイベントを発火
}
});
実行結果
入力フィールドに名前を入力してボタンをクリック（または Enter キー）すると、「こんにちは、○○さん！」と表示されます。
解説
4 行目から 6 行目で、必要な要素を取得しています。
4: const input = document.querySelector("#nameInput");
5: const button = document.querySelector("#greetBtn");
6: const output = document.querySelector("#output");
9 行目から 25 行目で、ボタンがクリックされたときの処理を定義しています。
11 行目では、input 要素の value プロパティを使って、入力された値を取得しています。
11: const name = input.value;
14 行目から 17 行目では、名前が空の場合にアラートを表示し、処理を中断しています。
14: if (name === "") {
15: alert("名前を入力してください");
16: return;
17: }
20 行目では、p タグの中に挨拶メッセージを設定しています。
20: output.textContent = `こんにちは、${name}さん！`;
23 行目と 24 行目では、イベントオブジェクトから情報を取得してコンソールに表示しています。
23: console.log("クリックされた要素:", event.target);
24: console.log("イベントの種類:", event.type);
28 行目から 32 行目では、入力フィールドで Enter キーが押されたときに、ボタンのクリックイベントを発火させています。
28: input.addEventListener("keydown", function(event) {
29: if (event.key === "Enter") {
30: button.click(); // ボタンのクリックイベントを発火
31: }
32: });