JavaScript でのイベント バブリングとキャプチャの違い
この記事では、JavaScript で使用されるイベント バブリングとイベント キャプチャについて説明します。 この記事を読めば、JavaScript でのイベントのバブリングとキャプチャーが明確に理解できるようになります。
また、これらのイベントの違いについても説明します。 JavaScript でイベントのバブリングとキャプチャをいつ使用するかを見ていきます。
JavaScript では、イベントのバブリングとキャプチャは、ブラウザーがネストされた要素を対象としたイベントを処理する方法のフェーズを表します。
この 2つのイベントを 1つずつ理解していきましょう。
JavaScript でのイベント バブリング
イベント バブリングは、JavaScript で使用されるイベント伝播の方法です。 イベント バブリングは、イベントをトリガーする要素から開始し、イベントを含む要素を順番にバブリングするプロセスです。
JavaScript でイベント バブリングを使用すると、イベントは最初に最も内側の要素によってキャプチャおよび処理され、次に最も外側の要素に伝達されます。
イベントバブリングの原理は非常に単純です。 イベントが別の要素で発生すると、最初にハンドラーで実行され、次にその親要素で実行されます。
これは、JavaScript のネストされた要素でイベントが伝播される順序に関連しています。
以下のチャートを参考にして、イベントのバブリングを理解しましょう。
上の画像は、ユーザーがボタンをクリックすると、イベントがこの順序で下から上に流れることを示しています。
それでは、サンプル コードを使用して、イベント バブリングを理解しましょう。
ご覧のとおり、parent と child という 2つのボタンを作成した HTML コードがあります。 parent ボタンを <div> に保存し、child ボタンを <p> に保存しました。
以下のコードでは JavaScript を使用し、スクリプトでは .addEventListener オブジェクトを使用してバブリング イベントを実行しました。
このコードを実行すると、parent と child の 2つのイベントが表示されます。 child イベントは最も内側の要素であり、parent イベントは最も外側の要素です。
コード例:
<!DOCTYPE html>
<html>
<head>
<title>
The Bubbling_Event in Javascript
</title>
</head>
<body>
<h2>The Bubbling_Event in Javascript</h2>
<div id="parent">
<button>
<h2>Parent</h2>
</button>
<button id="child">
<p>Child</p>
</button>
</div><br>
<script>
document.getElementById(
"child").addEventListener("click", function () {
alert("YOU CLICKED THE CHILD ELEMENT.");
}, false);
document.getElementById(
"parent").addEventListener("click", function () {
alert("YOU CLICKED THE PARENT ELEMENT.");
}, false);
</script>
</body>
</html>
コードを実行した後の出力:
parent ボタンをクリックすると、次の出力が得られます。
child ボタンをクリックすると、次の出力が得られます。
上記のコード例から、イベント バブリングでは、最も内側の要素のイベントが最初にトリガーされ、次に最も外側のイベントの要素に続くことがわかります。 <p> 要素が最初に処理され、次に <div> が処理されます。
そのため、JavaScript で最も内側の要素を処理する必要がある場合は、バブル イベントを使用します。
上記のサンプル コードのデモ こちら にアクセスします。
JavaScript でのイベント キャプチャ
イベント キャプチャが実際のコードで使用されることはめったにありませんが、非常に役立つ場合があります。 イベント キャプチャは、イベント バブリングの反対です。 イベント キャプチャでは、最も外側の要素が最初にターゲットにされます。
JavaScript では、最も外側の要素のイベントを最初に処理する必要がある場合に、イベント キャプチャを使用します。 イベント キャプチャはイベント バブリングの前に実行されますが、イベント バブリングは JavaScript でイベントの流れを処理するのに十分であるため、めったに使用されません。
イベントキャプチャを理解するためのフローチャートを以下に示します。 この画像は、ユーザーがボタンをクリックすると、イベントがこの順序で上から下に流れることを示しています。
それでは、サンプル コードを使用してイベント キャプチャを理解しましょう。
次のコードでわかるように、<div> 要素にボタンを作成しました。 次の HTML コードでも JavaScript を使用しました。このコードでは、イベント キャプチャを実行する .addEventListener オブジェクトを使用しています。
このコードを実行して Click Me ボタンをクリックすると、コンソールは次の出力を生成します。
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>What is Event Capturing in JavaScript</title>
</head>
<body>
<div class="button-list">
<div class="button-container">
<button class="button"
onClick="console.log('Button!')">
Click Me
</button>
</div>
</div>
<script>
document.addEventListener("click", () =>
console.log('Event Capturing!'), true);
document.addEventListener("click", () =>
console.log('Event Bubbling!'), false);
</script>
</body>
</html>
コードの出力:
ご覧のとおり、JavaScript でイベント キャプチャを使用すると、イベントは予想どおりの順序で処理されます。
上記のサンプル コードのデモ こちら にアクセスします。
これら 2つのイベントの主な違いは、イベント バブリングが最初に最も内側から最も外側のイベントを処理し、イベント キャプチャが最初に最も外側の要素のイベントを処理することです。
この記事を読んだ後、JavaScript でイベントのバブリングとキャプチャがどのように機能するかをお見せできたことを願っています。
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn