前回は非同期処理について紹介しました。
今回はイベント処理について紹介していきます。
 |
1冊ですべて身につくJavaScript入門講座 [ Mana ] 価格:2794円 |
JavaScriptのイベント処理を極める！addEventListenerの使い方と応用テクニック
ウェブサイトをもっとインタラクティブにしたいなら、JavaScriptのイベント処理は避けて通れない。この記事では、イベント処理の基礎から実践的な応用テクニックまでをわかりやすく解説していく。
イベントとは？
ウェブページでは、ボタンのクリックやキーボードの入力、マウスの移動など、ユーザーが行うさまざまな動作が「イベント」として扱われる。これらのイベントに応じて適切な処理を実行するのが、JavaScriptの「イベントリスナー」だ。
たとえば、「ボタンをクリックしたらメッセージを表示する」といった動作を実装するのに役立つ。
addEventListenerの基本
JavaScriptでイベントを扱う際に最もよく使われるのがaddEventListenerメソッド。基本の構文は以下のとおり。
要素.addEventListener(イベントの種類, 関数);
例：クリックイベントを追加する
以下のコードは、ボタンをクリックしたときに「クリックされました！」と表示する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>イベントリスナーの基本</title>
</head>
<body>
<button id="myButton">クリックしてね</button>
<p id="message"></p>
<script>
document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("message").textContent = "クリックされました！";
});
</script>
</body>
</html>
これで、ボタンをクリックするとメッセージが表示される。
よく使うイベントの種類
JavaScriptにはさまざまなイベントがあり、用途によって使い分ける。
| イベント名 | 説明 |
|---|---|
| click | クリックされたとき |
| mouseover | マウスが要素に乗ったとき |
| mouseout | マウスが要素から外れたとき |
| keydown | キーが押されたとき |
| keyup | キーが離されたとき |
| submit | フォームが送信されたとき |
| change | フォームの値が変更されたとき |
イベントリスナーの応用テクニック
1. 複数のイベントを設定する
1つの要素に対して、複数のイベントを追加することも可能。
const button = document.getElementById("myButton");
button.addEventListener("mouseover", function() {
button.style.backgroundColor = "lightblue";
});
button.addEventListener("mouseout", function() {
button.style.backgroundColor = "";
});
このコードでは、ボタンにマウスが乗ると色が変わり、離れると元に戻る。
2. イベントの削除
removeEventListenerを使えば、登録したイベントを解除できる。
function handleClick() {
alert("クリックされました！");
}
button.addEventListener("click", handleClick);
// しばらくしてイベントを削除
setTimeout(() => {
button.removeEventListener("click", handleClick);
}, 5000);
このコードでは、5秒後にボタンのクリックイベントが削除される。
3. イベントの伝播を制御する
イベントは親要素や子要素にも影響を及ぼす。これを「イベントの伝播」という。
stopPropagationを使う
以下のコードでは、リストのアイテムをクリックしても親要素のイベントが発生しないようにする。
document.getElementById("list").addEventListener("click", function() {
alert("リストがクリックされました");
});
document.querySelectorAll(".item").forEach(item => {
item.addEventListener("click", function(event) {
alert("アイテムがクリックされました");
event.stopPropagation();
});
});
これにより、アイテムをクリックしても親のリストにはイベントが伝播しない。
まとめ
addEventListenerを活用すると、ウェブページに動的な動作を簡単に追加できる。基本的な使い方を押さえつつ、応用テクニックを活用してインタラクティブなサイトを作成しよう。
参考リンク
JavaScriptのイベントを理解して、より高度なウェブ開発を楽しもう！
以上がイベント処理についてでした。
次回はES6+の新機能をまとめたいと思います。
