問題タブ [event-capturing]

後でモーダル ダイアログに表示される ID「edit-resource」のフォームがあるとします。

モーダルフォームが何度ポストバックされて置き換えられても、リスナーがイベントをキャプチャするように、ドキュメントにリスナーをアタッチします。

フォームを送信すると、イベント ハンドラーは期待どおりに実行されますが、ブレークポイントに到達するまでに、投稿は既にサーバーにヒットしています (これにもブレークポイントが設定されています)。送信イベントは (つまり、false を返すことによって) キャンセル可能であると想定されていますが、ハンドラーの最初の行で既にサーバーにヒットしている場合、そのようなイベントをキャンセルすることはできません。この問題の原因は何ですか?

React.js でバブリングとキャプチャを処理する例を探しています。JavaScript で 1 つ見つけましたが、React.js に相当するものを見つけるのに苦労しています。

React.js でバブリングとキャプチャの例を作成するにはどうすればよいですか?

AngularJS 2 で変更検出と呼ばれるものが、実際に ReactJS のキャプチャ フェーズとバブリング フェーズからのイベントのピックアップに対応するかどうかを把握しようとしています。そうですか？誰でも AngularJS 2 の例を提供できますか?

ReactJS の例:

私が理解しているように、DOM レベル 2 のイベント処理は次の順序で機能します。

1. 先頭の HTML 要素からターゲットの前までずっとキャプチャする
2. ターゲット自体
3. 一番上の HTML 要素までバブリングする

例はhttps://jsfiddle.net/uwe5dmxw/
にあります （この質問の最後にコードを含めます）

しかし、現在の Google Chrome、Firefox、Safari、さらには IE 11 で「子」要素 (最下位レベルの子孫) をクリックすると、次の順序で一貫した結果が得られます。

1. HTML キャプチャ
2. ボディキャプチャー
3. 親のキャプチャ
4. ターゲットバブリング
5. ターゲットの捕獲
6. 親バブリング
7. BODYバブリング
8. HTML バブリング

すなわち、「ターゲット捕捉」と「ターゲットバブリング」の順序が逆になる。

私が理解しているように、DOM レベル 2 のイベントはターゲットに 1 回しか到達しないと言われていますが、ほとんどのブラウザは、イベントのキャプチャ中に 1 回、イベントのバブリング中に 1 回、2 回到達するように実装しています。しかし、実際には、なぜ「ターゲットのキャプチャ」と「ターゲットのバブリング」が逆になっているのでしょうか。

コード: (ただのデモです。必要がなければ見る必要はありません)

JavaScript:

私は、1 つの eventListener をイベントの<audio>要素にバインドしplay、別の eventListener を同じイベントの親要素にバインドするプロジェクトに取り組んでいます。子のコールバックは常に呼び出されますが、親のコールバックは呼び出されないことに気付きました。

のキャプチャ モードを使用するとaddEventListener()、両方のコールバックが正常に呼び出されます。最初は親、次に子です。

さらに調査するために、コードを書いたところ、再生イベントが親にバブルバックしないことがわかりました。

そして、これが出力でした：

親クリックキャプチャ
子クリックキャプチャ
子クリックバブル
親クリックバブル
親プレイキャプチャ
子プレイキャプチャ
子プレイバブル

この動作がプレイイベントのみに特有のものなのか、それともバブルフェーズ（またはキャプチャフェーズ）に入らない他のイベントがあるのか​​ 誰にも分かりますか?

私のプロジェクトには、window クリック eventListener と div 要素のいくつかのクリック イベントがあります。div をクリックすると、この div 要素のクリック イベント (正しい) とウィンドウ クリック eventListener が発生します (正しくない)。

ウィンドウ クリック eventListener がイベントを発生させない div 要素をバブルできますか?

より良いデモンストレーション jsfiddle のために:

誰かが私を助けてくれることを願っています。

Q) 私のポイントは、どちらの状況でも addEventListener の最後のパラメーターを true または false に設定するときはいつでも、イベントのターゲット (e.target) は同じ、つまり img のままであるということです。以下のコードでは、最後のパラメーターを true に設定していることがわかります。キャプチャしますが、まだconsole.logバブルにあるのは本当です。それは私を混乱させます

簡単な質問:event.preventDefault()要素が「キャプチャ」、「アット」、および「バブリング」フェーズの一部である限り、イベント ハンドラーを設定した要素に関係なく実行できますか?

ページ上ですべてを選択できないようにしたかったので、最初はやりたかった

キャプチャ フェーズの最初の段階では、ページ コンテンツ要素に伝播しないため、選択は行われません。

ただし、伝播が停止しても、デフォルトのアクションは引き続き実行されるようです。

そして、キャプチャフェーズでこれを実行しようとしました:

次に、をに変更しtrueてfalse、バブリング フェーズ中にハンドラーが呼び出されるようにします。

それも機能します。

「preventDefault」は要素ごとだと思っていました。

したがって、キャプチャ段階、段階、バブリング段階のすべてで呼び出すことができev.preventDefault()、それはまったく同じイベントオブジェクトであり、ハンドラーを設定する要素に関係なく、デフォルトのアクションを防ぐことができます。要素は「キャプチャ」、「アット」、および「バブリング」ループにありますか?