Javascript イベントキャプチャとバブリングメソッドの詳細な説明

1. イベント処理モデル

イベントバブリングとイベントキャプチャリング: イベントバブリングとイベントキャプチャリングは、それぞれ Microsoft と Netscape によって提案されました。どちらの概念も、ページ内のイベントフロー (イベントが発生する順序) の問題を解決することを目的としています。

<div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
</div>

3 つのネストされた div がある場合、3 つの要素に同じイベントが登録されると、それらのトリガー順序はどのようになりますか?

1. イベントバブリング

Microsoft は、イベントバブリングと呼ばれるイベントストリームを提案しました。構造的に（視覚的にではなく）ネストされた要素にはバブリング機能があり、つまり同じイベントが子要素から親要素にバブリングします。（ボトムアップ）

上記の例では、バブリング方式を使用する場合、トリガー順序は d3——>d2——>d1 となるはずなので、確認してみましょう。

（1）3つのdiv要素にイベントをバインドする

//1. 要素を取得する var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. イベントのバインド d1.onclick = function(){
     コンソールログ(このID)
  }
d2.onclick = 関数(){
      コンソールログ(このID)
  }
d3.onclick = 関数(){
      コンソールログ(このID)
   }

（２）運用実績：

赤い部分をクリックしてください:

紫色の領域をクリックします。

緑色の領域をクリックします:

以上、イベント盛り上がってます！

2. イベントキャプチャ

構造的に（視覚的にではなく）ネストされた要素には、イベントキャプチャの機能があります。つまり、親要素から子要素（イベントソース要素）に同じイベントがキャプチャされます。 (トップダウン) (つまり、イベントはキャプチャされません)

上記の例では、バブリング方式を使用する場合、トリガー順序は d1——>d2——>d3 となるはずなので、確認してみましょう。

（1）3つのdiv要素にイベントをバインドする

//1. 要素を取得する var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. イベントのバインド d1.onclick = function(){
     コンソールログ(このID)
  }
d2.onclick = 関数(){
      コンソールログ(このID)
  }
d3.onclick = 関数(){
      コンソールログ(このID)
   }

（２）運用実績：

赤い部分をクリックしてください:

紫色の領域をクリックします。

緑色の領域をクリックします:

イベント攻略ゲット!!!

知らせ：

トリガーの順序: 最初にキャプチャ、次にバブリング
focus 、 blur 、 change 、 submit 、 reset 、 selectなどのイベントはバブルしません。

2. イベントのバブルを防ぐ

(1) W3C標準のevent.stopPropagation(); ですが、IE9以下ではサポートされていません。

//1. 要素を取得する var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. イベントのバインド d1.onclick = function(){
     コンソールログ(このID)
  }
d2.onclick = 関数(){
      コンソールログ(このID)
  }
d3.onclick = 関数(e){
      e.stopPropagation();
      コンソールログ(このID)
   }

緑色の領域をクリックすると、外部イベントが順番にトリガーされず、イベントのバブリングがブロックされることがわかります。

(2) IE固有: event.cancelBubble = true;

//1. 要素を取得する var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2. イベントのバインド d1.onclick = function(){
     コンソールログ(このID)
  }
d2.onclick = 関数(){
      コンソールログ(このID)
  }
d3.onclick = 関数(e){
      e.cancelBubble = true;
      コンソールログ(このID)
   }

結果は（１）と同じである。