Wikibooks

JavaScript/イベント処理

< JavaScript

Webページにおいて、ユーザの操作に対して適切な処理を行うことが重要です。そのためにJavaScriptでは、イベント処理という仕組みが用意されています。 イベント処理とは、ユーザがマウスをクリックしたり、キーボードを入力したりするなどの操作が発生した際に、それに応じた処理を実行することです。例えば、ボタンをクリックした際に別の画像を表示する、入力フォームに文字が入力された際にその内容を表示する、といった処理がイベント処理によって実現されます。 この章では、JavaScriptを使ってイベント処理を実装する方法について解説します。具体的には、イベントの種類や発生させる方法、イベントハンドラの書き方、イベントオブジェクトの扱い方などについて説明します。 JavaScriptにおけるイベント処理の基礎を理解し、Webページのインタラクティブ性を高めるためのスキルを身に付けましょう。

イベントとは何か？

編集

[イベントの概念と種類について説明する。]

イベントとは、Webページ上でのユーザーの操作やブラウザの動作など、さまざまな出来事を指します。例えば、ボタンをクリックする、マウスを動かす、ページが読み込まれる、などです。JavaScriptを使うことで、これらのイベントに対して処理を行うことができます。

イベントは種類が多く、それぞれに固有の情報を持っています。例えば、クリックされた座標や、キー入力された文字などです。これらの情報を利用して、イベントに対して適切な処理を行うことができます。

イベントを発生させる方法

編集

[イベントを発生させる方法には、HTML要素に直接イベントを設定する方法や、JavaScriptからイベントを発生させる方法などがある。それぞれの方法について説明する。]

イベントを発生させる方法には、HTML要素に直接イベントを設定する方法や、JavaScriptからイベントを発生させる方法などがあります。

HTML要素に直接イベントを設定する方法は、以下のように記述します。 

<button onclick="alert('Hello World!')">Click Me</button>

これは、ボタンがクリックされたときに"Hello World!"というメッセージを表示する例です。

JavaScriptからイベントを発生させる場合は、以下のように記述します。 

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Hello World!');
});

これは、ボタンがクリックされたときに"Hello World!"というメッセージを表示する例です。querySelectorメソッドを使ってボタン要素を取得し、addEventListenerメソッドでクリックイベントを登録しています。

イベントハンドラの書き方

編集

[イベントハンドラとは、イベントが発生した際に実行される関数のことである。イベントハンドラの書き方や設定方法について解説する。]

イベントハンドラとは、イベントが発生した際に実行される関数のことです。イベントハンドラは、以下のように書くことができます。 

element.addEventListener('click', function() {
  // クリックされたときの処理
});

この例では、clickイベントが発生したときに実行される無名関数を定義しています。この無名関数には、クリックされたときに実行したい処理を記述します。

イベントオブジェクト

編集

[イベントが発生した際には、イベントに関する情報を持ったオブジェクトが生成される。このオブジェクトについて説明し、どのように扱うかを解説する。]

JavaScriptでイベントが発生すると、イベントオブジェクトが生成されます。このオブジェクトには、発生したイベントに関する情報が含まれます。例えば、クリックされたマウスの座標や、キーイベントの場合は押されたキーの種類などが含まれます。

以下は、マウスクリックイベントで生成されるイベントオブジェクトの例です。 

function handleClick(event) {
  console.log("Mouse clicked at:", event.clientX, event.clientY);
}

イベントオブジェクトは、イベントが発生した要素によって異なるプロパティを持ちます。例えば、マウスクリックイベントの場合は、上記の例のようにclientXとclientYプロパティがあります。詳しいプロパティについては、公式ドキュメントを参照してください。

イベントの伝播

編集

[イベントは親要素から子要素に伝播する。この伝播について詳しく説明し、伝播を停止する方法について解説する。]

イベントは、親要素から子要素に伝播します。つまり、例えばボタン要素をクリックした場合、そのクリックイベントはボタン要素だけでなく、その親要素であるフォーム要素やドキュメント全体にも伝播します。

この伝播を「イベントバブリング」と呼びます。しかし、イベントが親要素から子要素に伝播するのを防ぐこともできます。これを「イベントキャプチャリング」と呼びます。

イベントキャプチャリングを利用する場合は、以下のようにしてイベントリスナーを設定します。 

document.addEventListener("click", function() {
  console.log("Document clicked first!");
}, true);

上記の例では、ドキュメント全体にクリックイベントリスナーを設定しており、第三引数にtrueを指定しています。これにより、イベントが子要素に伝播する前に、ドキュメント全体でのイベントハンドリングが先に実行されます。

実践的なイベント処理の例

編集

[ボタンをクリックした際に、別の画像を表示する例など、実践的なイベント処理の例をいくつか紹介する。]

ボタンをクリックした際に、別の画像を表示する例を紹介します。以下のコードは、HTMLに2つの画像と1つのボタンを設置し、ボタンをクリックした際に画像を切り替える処理をJavaScriptで実装したものです。 

<!DOCTYPE html>
<html>
<head>
	<title>イベント処理の例</title>
</head>
<body>
	<img id="img1" src="img1.jpg">
	<button id="btn">画像を変更</button>
	<img id="img2" src="img2.jpg" style="display: none;">
	<script>
		// ボタン要素を取得する
		var btn = document.getElementById("btn");
		
		// ボタン要素にクリックイベントを設定する
		btn.addEventListener("click", function(){
			
			// 画像要素を取得する
			var img1 = document.getElementById("img1");
			var img2 = document.getElementById("img2");
			
			// 表示状態を切り替える
			if (img1.style.display == "none") {
				img1.style.display = "block";
				img2.style.display = "none";
			} else {
				img1.style.display = "none";
				img2.style.display = "block";
			}
		});
	</script>
</body>
</html>

まとめ

編集

[本章で学んだ内容をまとめ、イベント処理についての基礎的な知識を確認する。]

本章では、JavaScriptにおけるイベント処理の基礎的な知識について学びました。イベントがどのように発生するか、どのようにイベントハンドラを設定するか、イベントオブジェクトやイベントの伝播について理解しました。また、実践的なイベント処理の例を紹介しました。これらの知識を活用して、インタラクティブなWebページを作成することができます。

附録

編集

チートシート

編集 
// イベントリスナーの追加
element.addEventListener('event', function);

// イベントリスナーの削除
element.removeEventListener('event', function);

// イベントオブジェクトの取得
element.addEventListener('event', function(event) {
  // イベントオブジェクトを使用した処理
});

// イベント伝播の停止
event.stopPropagation();

// デフォルトアクションの防止
event.preventDefault();

// イベントの手動トリガー
element.dispatchEvent(new Event('event'));

// イベントリスナーの一時停止・再開
element.addEventListener('event', function(event) {
  if (/* 条件 */) {
    event.stopImmediatePropagation();
  }
}, true);

// イベントデリゲーション（親要素でイベントを捕捉）
parentElement.addEventListener('event', function(event) {
  if (event.target.matches('.child')) {
    // 子要素がクリックされた場合の処理
  }
});

以上が、JavaScriptでイベント処理を行う際によく使用されるチートシートです。

用語集

編集
  1. イベント (Event)：何らかのアクションによって発生する操作や状態のこと。例えば、クリック、ロード、マウスオーバーなど。
  2. イベントハンドラ (Event handler)：イベントが発生したときに実行される関数のこと。
  3. イベントリスナー (Event listener)：イベントを監視し、イベントが発生した場合にイベントハンドラを呼び出すオブジェクトのこと。
  4. イベントオブジェクト (Event object)：イベントが発生したときに生成されるオブジェクトで、イベントに関する情報を持っています。例えば、クリック位置、キーの種類など。
  5. イベントの伝播 (Event propagation)：イベントが発生した要素から、その親要素、更にその親要素といったように、親子関係にある要素に順にイベントが伝わること。
  6. イベントキャプチャリング (Event capturing)：イベント伝播の最初の段階で、親要素から順にイベントが捕捉されること。
  7. イベントバブリング (Event bubbling)：イベント伝播の最後の段階で、発生した要素から親要素に順にイベントが伝播されること。
  8. preventDefault()：デフォルトのイベント動作をキャンセルするためのメソッド。
  9. stopPropagation()：イベント伝播を停止するためのメソッド。
  10. addEventListener()：要素にイベントリスナーを追加するためのメソッド。
  11. removeEventListener()：要素からイベントリスナーを削除するためのメソッド。
"https://ja.wikibooks.org/w/index.php?title=JavaScript/イベント処理&oldid=241361" より作成