1

私がこのレイアウトを持っているとしましょう

<body>
  <div class="A">
    <span class="B">span</span>
  </div>
<body>

委任された非キャプチャハンドラーを使用して、あらゆる場所のクリックをカスタムイベントに変換し、元のターゲットにディスパッチします。

document.addEventListener('click',function(e){ 
  e.target.dispatchEvent(new CustomEvent('custom'));
}, false);

キャプチャイベントリスナーをAに割り当てます。

div_class_A_element.addEventListener('custom',function(){ 
  console.log('captured custom on A'); 
}, true);

Bをクリックするとどうなりますか？実況が必要です。また、ただjsfiddleするように言わないでください、私はそれができることを知っています、しかし私が知りたいのはそれが何をすることになっているのかということです。

これが私の推測です：

クリックイベントがドキュメントからBに完全に移動すると、ドキュメントの委任ハンドラはBで実行され、ドキュメントに戻ります。今何が起こっているのかわかりません：Bにカスタムイベントをディスパッチします：カスタムイベントはBから始まり、バブリングを開始しますか？その場合、Aのキャプチャハンドラは実行されません（バブリングフェーズ中にキャプチャハンドラがキャッチしないため）。または、ディスパッチされたイベントは他のイベントとまったく同じように動作し、ドキュメントから開始してキャプチャフェーズ全体を実行しますか？

4

2 に答える 2

3

ディスパッチされたイベントもキャプチャフェーズを通過します。w3c domレベル3仕様によると：

アプリケーションはEventTarget.dispatchEvent（）メソッドを使用してイベントオブジェクトをディスパッチでき、実装はこのメソッドを使用するかのようにイベントオブジェクトをディスパッチする必要があります。-ソース

その引用自体はあまり役に立ちませんが、仕様は、（および内部実装が）従わなければならないイベントフローを説明し続けています：dispatchEvent

  1. キャプチャフェーズ
  2. ターゲットフェーズ
  3. バブルフェーズ

W3C：イベントフロー

キャプチャを実行する必要があります（によって停止されない限り。。に設定するstopPropagation()と、バブリングをスキップできます。Event.bubblesfalse

ツリーの最上位からイベントのターゲットまでのEventTargetsのチェーンは、イベントの最初のディスパッチの前に決定されます。イベント処理中にツリーに変更が発生した場合、イベントフローはツリーの初期状態に基づいて進行します。-ソース

したがって、この例では、Bからイベントをディスパッチすると、customAのイベントハンドラーが呼び出されます。

MDNから（上dispatchEvent）：

イベントをイベントシステムにディスパッチします。イベントは、直接ディスパッチされたイベントと同じキャプチャおよびバブリング動作の対象になります。-ソース

于 2013-01-06T05:03:32.543 に答える
0

シナリオの各要素にイベントがあった場合、このデモは操作の順序を示します。

  1. .Bクリック
  2. 。クリック
  3. ボディクリック
  4. ドキュメントリスナー
  5. Aでキャプチャされたカスタム
  6. ウィンドウクリック

documentリスナーはAすぐにdivディスパッチをトリガーし、その後バブリングが続行されます（にwindow）

于 2013-01-06T05:25:56.583 に答える