MENU

    JavaScript　イベント伝播の仕組みや種類、伝播を制御する方法

    PR
    JavaScript

    JavaScriptにおいて、イベント伝播の仕組みや種類、伝播を制御する方法について詳しく解説します。

    目次

    イベント伝播とは

    イベント伝播とは、ある要素でイベントが発生すると、そのイベントはその要素自身だけでなく、その要素の祖先要素や子孫要素にも伝播（伝搬）することがあります。このイベント伝播のことを、イベントバブリング（バブリング）と呼びます。

    イベント伝播によって、例えばあるボタンをクリックしたときに、そのボタンが含まれる要素や、さらに上位の要素（例えば親要素や祖先要素）もクリックされたことと同様の処理をすることができます。これは、イベント伝播が発生することで、複数の要素を一度に制御することができるというメリットがあるためです。

    イベント伝播には、次の3つの種類があります。

    1. イベントバブリング
      • イベントが発生した要素から、上位の要素に向かって伝播する方法です。
    2. イベントキャプチャリング
      • イベントが発生した要素から、下位の要素に向かって伝播する方法です。
    3. ターゲットでのイベント処理
      • イベントが発生した要素のみにイベントが処理される方法です。

    これらのイベント伝播を理解し、適切に制御することで、複雑なイベント処理を実現することができます。

    イベント伝播の種類

    イベント伝播には、3つの種類があります。それぞれ、「キャプチャリングフェーズ」、「ターゲットフェーズ」、「バブリングフェーズ」と呼ばれます。

    1. キャプチャリングフェーズ
      • イベントが発生した要素から始まり、上位要素に向かって伝播するフェーズです。イベントが発生した要素から親要素、更にその親要素の親要素というように、上位要素に向かってイベントが伝播していきます。このフェーズでイベントをキャプチャリングすることができます。
    2. ターゲットフェーズ
      • イベントが発生した要素に到達するフェーズです。このフェーズでイベントをターゲットに対して処理することができます。
    3. バブリングフェーズ
      • イベントが発生した要素から始まり、下位要素に向かって伝播するフェーズです。ターゲットフェーズが終わった後に、ターゲット要素から下位要素に向かってイベントが伝播していきます。このフェーズでもイベントをバブリングすることができます。

    イベント伝播には、親子関係がある要素に対して行われます。イベント伝播の仕組みを理解することで、イベントの伝播を制御することができます。また、イベント伝播を利用して、親要素と子要素のイベント処理を統一的に行うこともできます。

    イベント伝播を制御する方法

    イベント伝播を制御する方法はいくつかあります。以下でそれぞれの方法を説明します。

    1. キャプチャリングとバブリングを無効にする
      • イベント伝播を無効にすることで、キャプチャリングやバブリングが行われなくなります。これは、addEventListenerメソッドの第三引数にtrueまたはfalseを渡すことで実現できます。trueを渡すとキャプチャリングフェーズで処理され、falseを渡すとバブリングフェーズで処理されます。どちらも無効にする場合は、removeEventListenerメソッドを使用します。
    2. イベント伝播の停止
      • イベント伝播を停止することで、その後のイベント伝播が行われなくなります。これは、event.stopPropagation()メソッドを使用します。イベント伝播が発生した要素でこのメソッドを呼び出すことで、その要素を起点にして以降のイベント伝播を停止することができます。
    3. デフォルトの動作の無効化
      • イベントが発生した要素のデフォルトの動作を無効にすることで、その要素の持つ機能を無効化することができます。これは、event.preventDefault()メソッドを使用します。イベント伝播が発生した要素でこのメソッドを呼び出すことで、その要素が持つデフォルトの動作を無効にすることができます。

    これらの方法を組み合わせることで、イベント伝播を制御することができます。

    サンプルプログラムを使った解説

    stopPropagationを使ったサンプルプログラム

    まず、stopPropagation()メソッドを使用する例を見てみましょう。stopPropagation()メソッドは、イベントの伝播を停止するために使用されます。以下は、stopPropagation()メソッドを使用したサンプルプログラムです。

    <!DOCTYPE html>
<html>
<head>
	<title>stopPropagation()</title>
</head>
<body>
	<div id="outer" style="border: 2px solid red; padding: 20px;">
		<div id="inner" style="border: 2px solid blue; padding: 20px;">
			<button id="btn">Click me</button>
		</div>
	</div>
	<script>
		var outer = document.getElementById("outer");
		var inner = document.getElementById("inner");
		var btn = document.getElementById("btn");

		outer.addEventListener("click", function() {
			console.log("Outer div clicked");
		});

		inner.addEventListener("click", function() {
			console.log("Inner div clicked");
		});

		btn.addEventListener("click", function(event) {
			console.log("Button clicked");
			event.stopPropagation();
		});
	</script>
</body>
</html>

    このプログラムでは、ボタンがクリックされた場合にイベント伝播を停止するために、stopPropagation()メソッドが使用されています。ボタンをクリックすると、ボタンのイベントリスナーが呼び出されますが、イベント伝播はここで停止し、親要素であるinnerやouterにはイベントが伝播されません。

    stopImmediatePropagationを使ったサンプルプログラム

    stopImmediatePropagation()メソッドについて説明します。このメソッドは、stopPropagation()と同様にイベントの伝播を止めますが、stopPropagation()が伝播を止める前にすべてのリスナーを呼び出すのに対し、stopImmediatePropagation()は現在のリスナーの呼び出しを止め、以降のリスナーの呼び出しも防止します。

    以下は、stopImmediatePropagation()メソッドを使用したサンプルコードです。クリックイベントが発生したとき、最初のリスナーで伝播を止めるため、2つ目のリスナーが呼び出されません。

    <button id="btn">Click me</button>

<script>
const btn = document.getElementById('btn');

btn.addEventListener('click', function(event) {
  console.log('First listener');
  event.stopImmediatePropagation();
});

btn.addEventListener('click', function(event) {
  console.log('Second listener');
});
</script>

    このコードを実行すると、クリック時に”First listener”のみがコンソールに出力され、”Second listener”は出力されません。

    preventDefaultを使ったサンプルプログラム

    最後に、preventDefault()メソッドについて説明します。このメソッドは、デフォルトのイベントの動作をキャンセルします。たとえば、リンクのクリックイベントの場合、通常はリンク先に移動しますが、preventDefault()メソッドを使用することで移動を防止できます。

    以下は、preventDefault()メソッドを使用したサンプルコードです。リンクがクリックされたとき、デフォルトの移動を防止するため、alertが表示されます。

    <a href="https://example.com" id="link">Click me</a>

<script>
const link = document.getElementById('link');

link.addEventListener('click', function(event) {
  event.preventDefault();
  alert('Link clicked!');
});
</script>

    このコードを実行すると、リンクをクリックすると”Link clicked!”というアラートが表示され、リンク先に移動しません。

    以上が、イベント伝播を制御するための3つのメソッドの説明と、それぞれのメソッドを使用したサンプルコードの解説です。

    リスキリングでキャリアアップしてみませんか？

    リスキリング(学び直し)は、経済産業省が推奨しており、

    今だけ、最大７０％のキャッシュバックを受けることができます。

    リスキリング　給付金が出るスクール紹介

    最大70％の給付金が出るおすすめのプログラミングスクール！

    リスキリングで給付金が出るスクールを７つ紹介 ≫

    国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

    興味のある方はすぐに確認しましょう。

    まとめ

    イベント伝播の仕組みや種類、伝播を制御する方法について解説しました。

    • JavaScriptにおけるイベント伝播には、イベントの発生元から親要素や祖先要素に伝わっていく「キャプチャリング」と、イベントの発生元から子要素や孫要素に伝わっていく「バブリング」の2種類がある。
    • イベント伝播を利用することで、親子関係にある要素のすべてに同じイベントを適用することができる。
    • イベント伝播を制御するために、stopPropagation()メソッドやstopImmediatePropagation()メソッドを使用することができる。
    • preventDefault()メソッドを使用することで、イベントのデフォルトの動作をキャンセルすることができる。

    イベント伝播はJavaScriptの重要な機能の一つであり、Webアプリケーション開発においては欠かせない知識です。イベント伝播を理解することで、親子関係にある要素に対するイベント処理を実装することができます。

    また、stopPropagation()やpreventDefault()メソッドを使いこなすことで、イベント伝播の制御がより柔軟になります。

    JavaScript
    JavaScript
    よかったらシェアしてね！
    • URLをコピーしました！
    • URLをコピーしました！

    コメント

    コメントする

    CAPTCHA


    目次