イベントバブリングとイベントキャプチャは、イベントフロー時にJavaScriptで最もよく使用される用語です。これらは、HTML DOMAPIでのイベント伝播の2つの方法です。 JavaScriptでのイベントバブリングとイベントキャプチャに関するこの記事では、これらが必要な理由について詳しく説明します。 次の順序で：
JavaScriptのイベントバブリングとは何ですか？
イベントバブリングは、を使用してWebアプリケーションまたはWebページを開発するときに人々が遭遇しなければならない用語です。 。基本的に、イベントバブリングは、あるアイテムが別のアイテムにネストされているときにイベントハンドラーが呼び出され、同じイベントである必要がある手法です。カプセル化に似ています。
イベントバブリングは、JavaScriptでのイベント処理のごく一部にすぎません。それをよりよく理解するには、イベントの伝播と、それがイベントのバブリングをどのようにサポートするかについて知る必要があります。
イベントの伝播とは何ですか？
イベントの伝播は、親用語として、イベントのバブリングとキャプチャを子として比較できます。これは次のように表されます。
画像をクリックすると、クリックイベントが生成されるだけでなく、親「a」と祖父「li」に移動します。このようにして、機能の伝播が行われます。ここでは、画像は子と見なされ、クリックが生成されるイベントターゲットです。画像とその祖先が一緒になって、ツリー用語でブランチを形成します。イベントが伝播するパスを知るようになると、ブランチは重要になります。
各リスナーは、イベントに関する情報を収集するイベントオブジェクトでそれぞれ呼び出されます。特定のイベントのすべてのリスナーを呼び出すプロセスを知るようになると、この伝播は非常に重要になります。上の図から、分岐の決定が静的であることがわかります。イベント中に発生したツリーの変更はすべて無視されます。ここでは、伝播は双方向です。つまり、ウィンドウからイベントターゲットに移動し、戻ってきます。ここで、伝播は大きく3つのタイプに分類されます。それらは：
は関係があります
- キャプチャフェーズ： ウィンドウからイベントターゲットフェーズに移行します。
- ターゲットフェーズ： 目標フェーズです。
- バブルフェーズ： イベントターゲットの親からウィンドウに戻ります。
イベントキャプチャとは何ですか？
このフェーズでは、値が「true」として登録されているキャプチャーリスナーが呼び出されます。。それは次のように書かれています：
el.addEventListener（ 'クリック'、リスナー、true）
ここでは、リスナー値が「true」として登録されているため、このイベントがキャプチャされています。値がない場合、デフォルトの値はfalseであり、イベントはキャプチャされません。したがって、このフェーズでは、値がtrueであるイベントは、ウィンドウからの道を見つけて呼び出され、キャプチャされます。
次に、イベントターゲットフェーズで、登録されているすべてのリスナーが、フラグのステータスがtrueまたはfalseに関係なく呼び出されます。
JavaScriptでのイベントバブリングとイベントキャプチャの使用
バブリングフェーズでは、非キャプチャー、つまりフラグ値が「false」のイベントのみが呼び出されます。イベントバブリングとイベントキャプチャは、DOM（Document Object Model）の用語で非常に便利で重要です。
el.addEventListener（ 'click'、listener、false）//リスナーはキャプチャしませんel.addEventListener（ 'click'、listener）//リスナーはキャプチャしません
上記のコードは、バブリングとキャプチャフェーズの動作を示しています。すべてのイベントがイベントターゲットに送られるわけではありません。それらのいくつかは泡立ちません。彼らの移動は、ターゲットフェーズの後に停止します。次の図に、3つのイベントフェーズのフローを示します。
イベントバブリングはすべてのタイプのイベントで機能するわけではありませんが、リスナーは所有している必要があります '。バブル 」イベントオブジェクトのブールプロパティ。その他のプロパティには次のものがあります。
- e.target： イベントターゲットを参照します。
- e.currentTarget： これは、現在のリスナーが登録されているモードです。ここでは、値はを使用して参照されます この キーワード。
- e.eventPhase： これは、次のような他の3つのキーワードを参照する整数です。 Capturing_phase、Bubbling_phase、AT_Target 段階。
作業手順
上の図を詳しく見てみましょう。 「buttonOne」要素をクリックすると、すぐにイベントがトリガーされます。通常、イベントは、ツリーの最上位の要素であるルートから開始されます。次に、ツリーの後に「buttonOne」であるターゲットイベントが続きます。移動方法は次のとおりです。
図に示されているように、イベントはDOM用語を通過して、最終的にターゲットイベントに到達します。これで、イベントがターゲットに到達すると、イベントは終了しません。次の図に示すように、DOMの用語の範囲内で継続します。
以前と同様に、イベントのパスに沿って上に移動するすべての要素に、その存在が通知されます。このように進むにつれ、プロセスを停止できるかどうかを考えている必要があります。さて、質問への答えは「はい」です。イベントの伝播を停止できます。これは、を呼び出すことによって行われます 「stopPropagation」 イベントオブジェクトのメソッド。
window.addEventListener（ 'click'、e => {e.stopPropagation（）}、true）window.addEventListener（ 'click'、listener（ 'c1'）、true）window.addEventListener（ 'click'、listener（ 'c2 '）、true）window.addEventListener（' click '、listener（' b1 '））window.addEventListener（' click '、listener（' b2 '））キーワードを適用することにより、伝播を停止することができます。キーワード「」を適用すると、このように機能します。 stopPropagation」 その場合、メインイベントの下にあるすべてのイベントが呼び出されないため、上記のコードで説明されているように呼び出されません。 「」として知られている別のキーワードがあります stopImmediatePropagation」。 名前が示すように、それは兄弟の手続きを即座に停止します。
これで、記事は終わりです。 JavaScriptでのイベントバブリングとイベントキャプチャとは何かを理解していただければ幸いです。
JavaScriptでのイベントバブリングとイベントキャプチャについて理解したところで、 Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なウェブサイトを作成し、Amazon Simple Storage Service（S3）にデプロイする方法を学ぶのに役立ちます。
質問がありますか？ 「JavaScriptでのイベントバブリングとイベントキャプチャ」のコメントセクションにその旨を記載してください。折り返しご連絡いたします。
モデルビューコントローラーの例java