イベントのバブリングとキャプチャ

1. イベント バブリングとイベント キャプチャを理解する

JSではイベントが発生する順番を「イベントフロー」と呼び、イベントがトリガーされると一連の連鎖反応が起こります。

  
   
   
< div クラス= "おじいちゃん" >
私はおじいちゃんdivです
< p class = "息子" >
私は息子です。
< a class = "grandson" href = "#" > 私は孫です</ a >
</ p >
</ div >
  
   
   

各タグにイベントをバインドすると、<a> タグをクリックすると、<div> タグと <p> タグにバインドされたイベントもトリガーされることがわかります。この質問に答えるために、Microsoft と Netscape は、イベント キャプチャとイベント

(1) イベント キャプチャ: Microsoft Corporation によって提案された、イベントはドキュメント ルート ノード (Document オブジェクト) からターゲット ノードに流れ、途中でターゲット ノードの各親ノードを通過し、到達するまでこれらのノードでキャプチャ イベントをトリガーします。イベントのターゲット ノード

(2) イベント バブリング: Netscape によって提案されたもので、イベント キャプチャとは逆に、イベントはターゲット ノードからドキュメントのルート ノードに流れ、途中でターゲット ノードの各親ノードを通過し、これらでキャプチャ イベントをトリガーします。ドキュメントのルートノードに到達するまでノード。全体のプロセスは、水中の気泡のようなもので、水の底から上向きに移動します

ヒント: 上記のターゲット ノードは、イベントをトリガーするノードを指します。

その後、標準を統一するために、W3C は、次の図に示すように、イベント キャプチャとイベント バブリングを組み合わせるという妥協案を採用しました。

2.イベントキャプチャー（イベントキャプチャー）

イベント キャプチャ フェーズでは、イベントは DOM ツリーの最外層から開始され、ターゲット ノードの各親ノードを順番に通過し、イベントのターゲット ノードに到達するまで親ノードでイベントをトリガーします。上の画像のコードを例に、<a>タグをクリックすると、

すると、ドキュメント→div→p→aの順にイベントが<a>タグに配信されます。

 拡大：

element.addEventListener(イベント、関数、useCapture)

addEventListener メソッドは、特定の要素のイベント処理関数をバインドするために使用されます. 3 つのパラメーターがあります:「on なしのイベント型」、「イベント処理関数」、および「イベント フェーズの制御」. 3 番目のパラメーターはブール型です. The default is false, which means the event processing function is called during the event bubbling phase. 上記のコードのように true を渡すと、イベント処理関数はイベント キャプチャ フェーズ中に呼び出されます。

3. イベントバブリング

イベント バブリングは、イベント キャプチャとは正反対です。イベント バブリングは、ターゲット ノードから始まり、親ノードに沿って上昇し、水底の泡のように、ドキュメント ルート ノードまで親ノードでイベントをトリガーします。常に上がります。

  4. イベントのキャプチャとバブリングを防ぐ

イベント キャプチャとイベント バブリングを理解すると、この機能が使いにくいことがわかります.たとえば、特定のノードにイベントをバインドし、クリックしたときにこのイベントをトリガーしたかった.その結果、イベント バブリングにより、イベントこのノードの子要素がトリガーされます。これを防ぐにはどうすればよいでしょうか。

stopPropagation() メソッドは、イベントのキャプチャとイベントのバブリングを防ぐために JS で提供されます。構文は次のとおりです。

event.stopPropagation();
  
   
   

Note: stopPropagation() will prevent event capture and event bubbling, but it cannot prevent the default behavior of the label. たとえば、リンクをクリックすると、対応する Web ページを開くことができます。

 さらに、stopImmediatePropagation() メソッドを使用して、同じノードの同じイベントに対する他のイベント ハンドラーを防ぐことができます。たとえば、1 つのノードに対して複数のクリック イベントが定義されている場合、イベントがトリガーされると、これらのイベントが順次実行されます。イベント ハンドラで stopImmediatePropagation() メソッドを使用すると、残りのイベント ハンドラは実行されません。

構文形式は次のとおりです。

event.stopImmediatePropagation();
  
   
   

例：

 

5.デフォルトのアクションをブロックする

一部のイベントにはデフォルト アクションが関連付けられています。たとえば、リンクがクリックされると、指定されたページに自動的にジャンプし、送信ボタンがクリックされると、データがサーバーに送信されます。このようなデフォルト操作が発生することを望まない場合は、 preventDefault() メソッドを使用してそれを防ぐことができます。その構文は次のとおりです。

event.preventDefault();
  
   
   

例：

注: IE9 以下のバージョンは preventDefault() メソッドをサポートしていません。IE9 以下のブラウザーでは、event.returnValue = false; を使用できます。