17

DOM メソッドは、3 番目のオプションのaddEventListenerブール パラメーター (useCapture) をサポートし、関数がイベントバブリングまたはイベントキャプチャを伝播方法として使用するかどうかを示します。この記事では、違いがうまく示されています (例をクリックしてコードを表示してください)。

SO とブログ投稿に関する他の質問から、IE8 がサポートしていないため、イベント バブリングが好まれると結論付けました。

IE9+ のみをサポートする必要があるとします。どのような状況で、イベントのバブリングよりもイベントのキャプチャが必要または優先されるのでしょうか? 言い換えれば、イベントを最初に最も外側の要素で実行し、次に最も内側の要素で実行する方がよい状況は何でしょうか? イベントキャプチャの使用法を示すために、単純で実世界の例を探しています...

4

1 に答える 1

5

Internet Explorer ブラウザ以外では、イベント キャプチャが唯一のオプションでした。

当時の 2 つの重要なブラウザーの主な違いの 1 つは、イベントの処理方法でした。Microsoft はバブリング フェーズを使用しました。これは、イベントが最初にターゲット要素にヒットし、DOM 全体を上方向にトラバースして親ノードにヒットしたことを意味しますが、Netscape はまったく逆の方法で実行しました。つまり、イベントは最初に親要素を通過し、次に実行されます。ターゲット要素 - キャプチャ。これは初期の開発者に多くの問題を引き起こし、W3C は最終的に両方の種類の機能と自由意志で使用できるアプローチを指定しました。

イベント キャプチャは、バブリングがサポートされていない場合のイベント委任で役立ちます。例えば：

フォーカスなどの一部のイベントはバブルしませんが、キャプチャできます。ターゲット要素のインライン ハンドラーは、ターゲット要素のキャプチャー ハンドラーの前にトリガーされます。

Web プラットフォームで新しく指定された多くのイベント (メディア イベントなど) はバブルしません。これは、イベント委任に依存する Ember のようなフレームワークにとって問題です。ただし、IE9 で追加されたキャプチャ API は、すべてのイベントに対して適切に呼び出され、正規化レイヤーを必要としません。キャプチャ API をサポートすることで、jQuery の依存関係を削除できるだけでなく、これらの非バブル イベントを適切に処理できるようになります。これにより、イベント リスナーを手動で設定しなくても、コンポーネントでの再生などのイベントを使用できるようになります。

カスタム イベントとバブリングには、次の問題があります。

現在、Ember はイベント処理を jQuery に依存しており、これにはいくつかのコストが伴います。

jQuery silently changes inline handlers to bubble handlers.
    This changes expected invocation order
    This can cause automated tests to fail
Events triggered via jQuery.trigger trigger handlers in a different order than events triggered by a user.
    This changes expected invocation order
    This leads to difficult to reason about and debug aberrations in behavior
    This often causes automated tests to fail
Events must flow down and bubble back up through the entire DOM before being detected by the Ember application, and then must undergo an expensive delegation process that is effectively re-bubbling to find the right handler.
Handlers attached directly within components or by non-ember plugins take precedent over handlers attached by Ember, whether this was desired or not.

    This causes component handlers to have far-reaching side-effects
    This leads to difficult to reason about and debug aberrations in behavior
    This often causes automated tests to fail

メディア プレーヤーの focus=>play 前処理/後処理イベント フローは、単純な使用例です。

キャプチャ フェーズの仕組みは、バブリング フェーズ中にイベント委任によって後で適用される動作を準備または防止するのに理想的です。ここでは、マウス クリックに応答してソート可能オブジェクトを初期化しますが、イベントがバブリングを開始し、他のハンドラーがそれを処理する機会を得る直前に使用します。

キャプチャを利用するには、金属に降りる必要があります。jQuery のイベント メソッドはバブリングに対してのみ機能し、キャプチャ フェーズを利用することはできません。キャプチャ ハンドラは次のようになります。

    document.addEventListener("mousedown", function(event) {
      if ($(event.target).closest(".sortable_handle").length) {
         $("article.todolist, section.todolists").sortable();
         }
      }, true);

参考文献

于 2016-11-26T16:02:50.787 に答える