JavaScript でのイベント バブリングとイベント キャプチャに関する簡単な説明

関連する推奨事項: 「JavaScript ビデオ チュートリアル」

JS イベント フローの概略図:

完全な JS イベント フローはウィンドウから始まり、最後にウィンドウに戻るプロセスであり、イベント フローは 3 つに分かれていることがわかります。ステージ: キャプチャープロセス (1~5)、ターゲットプロセス (5~6)、バブリングプロセス (6~10);

実際には、キャプチャープロセスとバブリングプロセスは完全に完了しています。反対 親要素から子要素へ、また子要素から親要素へイベントが伝播するプロセス。

#イベント キャプチャ

イベント キャプチャは、イベント バインディングの 2 番目の形式でのみ実現できます

上記の例では、p3 がクリックされると、p1 は 2 つのクリック イベントを受け取ります。1 つはキャプチャ フェーズでトリガーされる p1 のクリック イベントで、もう 1 つはキャプチャ フェーズでトリガーされる p1 のクリック イベントです。バブリングフェーズでトリガーされます。;addEventListener の 3 番目のパラメーター: true----capture, false-----bubble; 上記の true 設定は、キャプチャフェーズでクリックイベントがトリガーされることを意味します

注: イベントがトリガーされたかどうかに関係なく、p1 は 2 つのクリック イベントを受け取ります。

別の例:

p3 をクリックすると、ポップアップ結果は次のようになります: 3、2、1

p3 がクリックされると、p1 は 2 つのクリック イベントを受け取ります。キャプチャ フェーズでは (true )、p1 のクリックがトリガーされます。イベント、ポップアップ結果: 3; バブリング段階では、p3 のクリック イベントがトリガーされ、ポップアップ結果: 2 となり、p1 のクリック イベントがトリガーされます、ポップアップ結果は次のようになります: 1

Event bubble

要素がイベントを受け取ると、要素はイベントを受け取ります。受信したすべてのイベントを親に伝播し、イベント バブル メカニズムと呼ばれる最上位ウィンドウに至るまで伝播します。

例:

バブリングの防止: バブリングを防ぐには、現在のイベント関数でevent.cancelBubble=を呼び出します。 true;

       
   
点击按钮div就出现，点击除按钮以外的部分div就消失
  

バブリングイベントがキャンセルされない場合の効果を比較するには、遅延器を使用します。効果を観察するには以下をご覧ください。

イベント バブリングの応用

以下は、Web サイト共有での一般的な機能です。 to

       
  
 
分享到
 
  

プログラミング ビデオをご覧ください。 ！

以上がJavaScript でのイベント バブリングとイベント キャプチャに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。