検索

ホームページ >ウェブフロントエンド >jsチュートリアル >javascriptで泡立つイベント？イベントの伝播が説明されました

javascriptで泡立つイベント？イベントの伝播が説明されました

Jennifer Aniston
Jennifer Anistonオリジナル
2025-02-16 09:33:10309ブラウズ

javascriptで泡立つイベント？イベントの伝播が説明されました

キーテイクアウト

    JavaScriptのイベントバブルは、1つの要素が2番目の要素内にネストされ、両方の要素が同じイベントのリスナーを登録したときにイベントハンドラーが呼び出される順序を指します。イベントのキャプチャとイベントの伝播とともに、イベントの泡立ちを理解することは、JavaScriptでイベントを操作するために不可欠です。
  • イベントの伝播は、イベントの泡立ちとイベントキャプチャの両方の用語です。これは、DOMツリーのブランチのノードに添付された、特定のイベントタイプのすべてのリスナーを呼び出すプロセスを指します。伝播は双方向であり、キャプチャフェーズ、ターゲットフェーズ、およびバブルフェーズの3つのフェーズに分けることができます。 イベントオブジェクトのStopPropagationメソッドを呼び出すことにより、
    • イベントの伝播を任意のリスナーで停止できます。これにより、伝播が停止します。つまり、現在のターゲットに続く伝播パスのノードに登録されたすべてのリスナーが呼び出されません。
  • 一部のイベントは、ブラウザが伝播の最後に実行するデフォルトのアクションに関連付けられています。このデフォルトのアクションは、リスナーのPreventDefaultメソッドを呼び出すことにより、イベントキャンセルで回避できます。
  • イベントバブルは、JavaScriptの旅行で出会ったかもしれない用語です。これは、1つの要素が2番目の要素内にネストされ、両方の要素が同じイベントのリスナーを登録したときにイベントハンドラーが呼び出される順序に関連しています（たとえば、クリックなど）。
    • しかし、イベントバブルはパズルの1つにすぎません。多くの場合、イベントのキャプチャとイベントの伝播と併せて言及されます。そして、3つの概念すべてをしっかりと理解することは、JavaScriptでイベントを操作するために不可欠です。たとえば、イベント委任パターンを実装する場合。 この投稿では、これらの各用語を説明し、それらがどのように合うかを示します。また、JavaScriptイベントの流れを基本的に理解することで、アプリケーションをきれいに制御することができる方法を示します。これはイベントの入門書ではないため、トピックに精通していることに注意してください。一般的なイベントについて詳しく知りたい場合は、本をご覧ください：JavaScript：Novice to Ninja。 イベントの伝播は何ですか？
    • イベントの伝播から始めましょう。これは、イベントバブルとイベントキャプチャの両方のブランケット用語です。サムネイルギャラリーの場合、リンクされた画像のリストを作成するための典型的なマークアップを考えてみましょう。

画像をクリックすると、対応するIMG要素だけでなく、祖父のLiなどのクリックイベントを生成するだけでなく、すべての要素の祖先を通り抜けてから、ウィンドウオブジェクト。

dom用語では、画像は

イベントターゲットであり、クリックが発生した最も内側の要素です。イベントターゲットとその先祖は、親からウィンドウオブジェクトまで、DOMツリーに枝を形成します。たとえば、画像ギャラリーでは、このブランチはノードで構成されます：img、a、li、ul、body、html、document、ウィンドウ。

ウィンドウは実際にはdomノードではなく、イベントのインターフェイスを実装することに注意してください。そのため、簡単にするために、ドキュメントオブジェクトの親ノードのように処理しています。

このブランチは、イベントが伝播する（または流れる）道であるため、重要です。この伝播は、ブランチのノードに添付された、特定のイベントタイプのすべてのリスナーを呼び出すプロセスです。各リスナーは、イベントに関連する情報を収集するイベントオブジェクトで呼び出されます（詳細については、後で詳しく説明します）。

同じイベントタイプのノードに複数のリスナーを登録できることを忘れないでください。伝播がそのようなノードの1つに到達すると、リスナーは登録の順に呼び出されます。

ブランチの決定は静的であることに注意する必要があります。つまり、イベントの最初の派遣で確立されています。イベント処理中に発生するツリーの変更は無視されます

伝播は、窓からイベントのターゲット、バックまで、双方向です。この伝播は、3つのフェーズに分類できます

ウィンドウからイベントへのターゲットの親：これは

キャプチャフェーズ

です

イベントターゲット自体：これは

ターゲットフェーズ
  1. です イベントからウィンドウに戻るイベントターゲットの親：バブルフェーズ
    2. これらのフェーズを区別するのは、呼ばれるリスナーのタイプです。
  2. イベントキャプチャフェーズ このフェーズでは、
    3. キャプター
  3. のみ、つまり、addeventlistener：
    4. このパラメーターが省略されている場合、そのデフォルト値は偽で、リスナーは捕獲者ではありません。
したがって、この段階では、窓からイベントのターゲット親までのパスで見つかった捕虜のみが呼ばれます。 イベントターゲットフェーズ

このフェーズでは、キャプチャフラグの値に関係なく、イベントターゲットに登録されているすべてのリスナーが呼び出されます。 イベントバブルフェーズ

イベントバブルフェーズでは、非カプターのみが呼び出されます。つまり、addeventListener（）：

の3番目のパラメーターに対してfalseの値で登録されたリスナーのみが登録されています。

すべてのイベントは、キャプチャフェーズ、フォーカス、ぼやけ、負荷などでイベントターゲットに流れ込んでいるが、バブルアップしないことに注意してください。つまり、彼らの旅行はターゲット

フェーズの後に停止します。
<span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

したがって、伝播の終わりに、ブランチの各リスナーは正確に1回呼び出されました。

イベントバブルは、あらゆる種類のイベントで行われません。伝播中、リスナーは、イベントオブジェクトの.bubbles booleanプロパティを読んでイベントが泡立つかどうかを知ることができます。

3つのイベントフローフェーズは、W3C ueivents仕様の次の図に示されています。

javascriptで泡立つイベント？イベントの伝播が説明されましたCopyright©2016 World Wide Web Consortium（MIT、Ercim、Keio、Beihang）。

伝播情報へのアクセス

イベントオブジェクトのバブルプロパティについて既に言及しました。このオブジェクトが提供する他の多くのプロパティがあり、リスナーが伝播に関連する情報にアクセスできるようにしています。

e.targetは、イベントターゲットを参照しています。

    E.CurrentTargetは、実行中のリスナーが登録されたノードです。これは、リスナーの呼び出しコンテキストの同じ値、つまりこのキーワードによって参照される値です。
  • e.eventphaseで現在のフェーズを見つけることさえできます。これは、3つのイベントコンストラクター定数Capturing_phase、bubbling_phase、at_targetの1つを指す整数です。
  • それを実践に入れてください
  • 上記の概念を実践してみましょう。次のペンには、b0…b4という名前の5つのネストされた正方形の箱があります。最初は、外側のボックスB0のみが表示されます。内側のものは、マウスポインターがそれらの上にホールするときに表示されます。ボックスをクリックすると、右側のテーブルに伝播フローのログが表示されます。
    • ボックスの外側をクリックすることも可能です。この場合、イベントターゲットは、クリック画面の場所に応じて、ボディまたはHTML要素になります。

    伝播を停止

    イベントオブジェクトのStopPropagationメソッドを呼び出すことにより、イベントの伝播を任意のリスナーで停止できます。これは、現在のターゲットに続く伝播パスのノードに登録されたすべてのリスナーが呼び出されないことを意味します。代わりに、現在のターゲットに添付されている他のすべてのリスナーは引き続きイベントを受け取ります。

    この動作は、以前のデモの単純なフォークで確認できます。リスナーの1人にStopPropagation（）への呼び出しを挿入するだけです。ここで、この新しいリスナーを、ウィンドウに登録されているコールバックのリストのキャプターとして準備しました：

    このように、どんなボックスがクリックされても、伝播は早期に停止し、ウィンドウ上の捕獲者のリスナーだけに到達します。

    即時伝播を停止

    その名前で示されているように、StopimmediatePropagationはすぐにブレーキをかけ、現在のリスナーの兄弟でさえイベントを受け取ることができません。最後のペンへの最小限の変更でこれを見ることができます：

    <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span>    ...
    <span><span><span><li</span>></span><span><span><a</span> href<span>="..."</span>></span><span><span><img</span> src<span>="..."</span> alt<span>=""</span>></span><span><span></a</span>></span>
</span><span><span><span></ul</span>></span>
</span>

    今、ログテーブルには出力はありません。C1とC2のウィンドウキャプチャラーは、新しいリスナーの実行後に伝播が停止するためです。

    イベントキャンセル

    一部のイベントは、ブラウザが伝播の最後に実行するデフォルトのアクションに関連付けられています。たとえば、リンク要素をクリックするか、フォームの送信ボタンをクリックすると、ブラウザが新しいページに移動するか、それぞれフォームを送信します。

    イベントオブジェクトのさらに別のメソッド、E.PreventDefaultをリスナーに呼び出すことにより、イベントキャンセルでそのようなデフォルトアクションの実行を回避することができます。

    結論

    それで、JavaScriptでイベントの泡立ちとイベントの作品がどのように作業をしているかを示したいと思います。ご質問やコメントがある場合は、以下の議論で聞いてうれしいです。

    参照

    ドキュメントオブジェクトモデル（DOM）レベル2イベント仕様

      W3C dom4 - イベント
      • dom - リビングスタンダード - イベント
      • W3C UIイベント - DOMイベントアーキテクチャ
      • msn - イベントとドム
    • この記事は、Yaphi BerhanuとDominic Myersによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！ JavaScriptでのイベントバブルに関するよくある質問（FAQ）

    イベントの泡立ちとイベントキャプチャの主な違いは何ですか？イベントバブリングとイベントキャプチャは、イベントが別の要素内の要素で発生したときのイベント伝播の2つの方法と両方です。要素は、そのイベントのハンドルを登録しています。主な違いは、DOMツリーに対するイベントの伝播方向にあります。イベントでは、イベントは最初に最も深いターゲット要素をトリガーし、次にその両親に泡立ちます。一方、イベントキャプチャには、両親から始まるターゲット要素に向けてイベントが含まれます。 StopPropagation（）メソッドを使用してバブリング。この方法は、キャプチャ間および泡立つ段階での現在のイベントのさらなる伝播を防ぎます。例は次のとおりです。

    element.addeventlistener（ 'click'、function（event）{

    event.stoppropagation（）;

    }）;

    ;親要素まで泡立つことはありません。

    JavaScriptでのイベントの泡立ちの実際的な使用は何ですか？たとえば、いくつかの子要素を持つ親要素があり、これらすべての要素で特定のイベントを聞きたい場合は、イベントリスナーを親に設定して、イベントバブルを利用できます。このようにして、イベントが子要素にトリガーされるたびに、それは親に泡立ち、そこでそれを処理できます。

    イベントバブルとキャプチャを使用できますか？

    はい、イベントバブルとキャプチャの両方を同時に使用できます。これはイベント代表団として知られています。これは、イベントリスナーを個々の子要素に設定する代わりに、イベントの処理を親要素に委任するテクニックです。これは、多数の子要素がある場合に特に役立ちます。

    JavaScriptのイベント伝播のデフォルトの動作は何ですか？

    JavaScriptのイベント伝播のデフォルト動作はイベントバブルです。これは、デフォルトでは、イベントがターゲット要素から開始され、ドキュメントのルートまでバブルが始まることを意味します。ただし、UseCaptureパラメーターをTrueに設定したAddEventListener（）メソッドを使用してこの動作を変更できます。これにより、イベントキャプチャが可能になります。イベントはネストされた要素から発射され、イベントはDOMツリーのネストされた要素の祖先を通して伝播します。これはイベントバブルです。各祖先は順番にイベントに対応する機会を得ます。この伝播は、ドキュメントのルートに到達するか、stoppropagation（）が呼び出されるまで続きます。 PreventDefault（）メソッドを使用して、イベントバブルでのイベントのデフォルトアクション。この方法は、キャンセル可能な場合にイベントをキャンセルします。つまり、イベントに属するデフォルトのアクションは発生しません。 JavaScriptでは、位相、ターゲットフェーズ、およびバブルフェーズをキャプチャしています。キャプチャ段階では、イベントは要素に至ります。ターゲットフェーズは、イベントがターゲット要素に到達した場所です。バブルフェーズは、イベントが要素から泡立つときです。

    イベントが泡立っているかどうかを確認するにはどうすればよいですか？

以上がjavascriptで泡立つイベント？イベントの伝播が説明されましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html Static Integer Boolean Object if for while using Interface Property Delegate Event pointer number function default constructor dom this location ul table li kind ui Access Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：機能的なJavaScriptのテストに関する初心者ガイド次の記事：機能的なJavaScriptのテストに関する初心者ガイド

関連記事

続きを見る