はじめに
Webページ上で特定のイベント（例：ボタンクリック、マウスオーバー、フォーム送信など）が発生した際に、それに対する処理を実行するための仕組みについて、まとめたので、共有させて頂きます。
DOMイベントに待機する（イベントリスナーを設定する）ことで、ユーザーの操作やその他のイベントに応じて特定のアクションを実行することができる。addEventListenerメソッドを使用してイベントリスナーを追加し、特定のイベントが発生したときに実行される関数を指定する事で、インタラクティブなWebアプリケーションを構築することができる。
DOMイベントに待機する基本的な方法
イベントリスナーの追加
element.addEventListener(event, function)
指定したイベントが発生したときに実行される関数（イベントリスナー）を追加
具体例
例1: ボタンのクリックイベントに待機する
メッセージ要素のテキスト内容を変更して、ユーザーにフィードバックを提供します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOMイベントの例</title>
</head>
<body>
<button id="myButton">クリックしてね</button>
<p id="message"></p>
<script>
// ボタン要素を取得
var button = document.getElementById("myButton");
// メッセージ要素を取得
var message = document.getElementById("message");
// クリックイベントリスナーを追加
button.addEventListener("click", function() {
message.textContent = "ボタンがクリックされました！";
});
</script>
</body>
</html>
例2: フォームの送信イベントに待機する
デフォルトの送信動作をキャンセルし、入力された名前を取得してメッセージを表示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOMイベントの例</title>
</head>
<body>
<form id="myForm">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<button type="submit">送信</button>
</form>
<p id="message"></p>
<script>
// フォーム要素を取得
var form = document.getElementById("myForm");
// メッセージ要素を取得
var message = document.getElementById("message");
// 送信イベントリスナーを追加
form.addEventListener("submit", function(event) {
// デフォルトの送信動作をキャンセル
event.preventDefault();
// 入力された名前を取得
var name = document.getElementById("name").value;
// メッセージを表示
message.textContent = "こんにちは、" + name + "さん！";
});
</script>
</body>
</html>
例3: マウスオーバーイベントに待機する
マウスがホバーエリアに入ったとき(出たとき)に実行される関数を追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOMイベントの例</title>
</head>
<body>
<div id="hoverArea" style="width: 200px; height: 100px; background-color: lightblue;">
マウスをここに置いてください
</div>
<p id="message"></p>
<script>
// ホバーエリア要素を取得
var hoverArea = document.getElementById("hoverArea");
// メッセージ要素を取得
var message = document.getElementById("message");
// マウスオーバーイベントリスナーを追加
hoverArea.addEventListener("mouseover", function() {
message.textContent = "マウスがホバーエリアに入りました！";
});
// マウスアウトイベントリスナーを追加
hoverArea.addEventListener("mouseout", function() {
message.textContent = "マウスがホバーエリアから出ました！";
});
</script>
</body>
</html>
例4：ボタンをクリックしたら、1秒後にアラートを表示する
setTimeout()関数を使用して、1秒後にalert()関数を実行することで実現しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMイベント待機例</title>
</head>
<body>
<button id="button">ボタン</button>
<script>
const button = document.getElementById('button');
button.addEventListener('click', function() {
setTimeout(function() {
alert('1秒後にアラートが表示されました');
}, 1000);
});
</script>
</body>
</html>
例5：画像が読み込まれたら、その画像のURLをコンソールに出力する
loadイベントを使用して、画像の読み込みが完了したときにconsole.log()関数を実行することで実現しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMイベント待機例</title>
</head>
<body>
<img src="image.jpg" id="image">
<script>
const image = document.getElementById('image');
image.addEventListener('load', function() {
console.log(image.src);
});
</script>
</body>
</html>
注意事項
イベントが発生しない可能性があることを考慮する必要があります。
イベントハンドラ内で非同期処理を行う場合は、適切な方法で処理を完了させる必要があります。
メモリリークが発生しないように、不要なイベントリスナーは削除する必要があります。
その他 非同期処理
setTimeout()関数: 指定した時間後に関数を実行。
setInterval()関数: 指定した間隔で関数を繰り返し実行。
requestAnimationFrame()関数: ブラウザの描画タイミングに合わせて関数を実行。
Promise.all()関数: 複数のPromiseが完了したときに処理を実行。