JavaScript イベントのバブリング、委任、バインド、伝播について簡単に理解します。

イベントのバブリング

1. : イベントのバブリングとは、イベントが最初に最も特定的な要素によって受信され、その後、より特定性の低いノードに上方に伝播することを意味します。
2. イベント バブリングはデフォルトで有効になっていますが、イベント バブリングは JS コードを通じて制御できます。

特徴:

• イベント関数がトリガーされると、イベント関数は実際にイベント オブジェクトを受け取ります。

• イベント関数でevent.stopPropagation()メソッドを実行すると、イベントのバブリングはここで終了します。

• すべての種類のイベントがイベント バブリングをサポートしているわけではありません。

• イベント バブリングは、同じタイプのイベント関数のみをトリガーします。

バブリング イベントを防止する 2 つの方法

バブリング イベントを防止するには 2 つの方法があります。1 つはプロパティで、もう 1 つはメソッドです。

cancelBubble は

、イベントを上位レベルに伝播するかどうかを設定または返します。

構文: event.cancelBubble = true;

stopPropagation()

、イベントがイベント ストリーム内でさらに伝播するのを防ぎます。

構文: event.stopPropagation();

例:相互に親と子である 3 つのオブジェクトにクリック応答関数をバインドします。

window.onload = function(){
      varspan = document.getElementById("sp");
      スパン.onclick = function(){
          アラート('スパンタグ');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = function(){
          アラート('ボックス3');
      }
      var body = ドキュメント.ボディ;
      body.onclick = function(){
          アラート('本文');
      

ボックスの泡立ちを防止します

。

window.onload = function(){
      varspan = document.getElementById("sp");
      スパン.onclick = function(){
          アラート('スパンタグ');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = 関数(イベント){
          アラート('ボックス3');
           イベント.stopPropagation();

      }
      var body = ドキュメント.ボディ;
      body.onclick = function(){
          アラート('本文');
      

イベントの委任

同じ

イベントを持つ多数のサブタグがある場合、サブタグをトラバースすることでそれらにイベントを追加できますが、新しいサブタグ要素が追加された場合は、新しいサブタグを再バインドする必要があります。要素、それ以外の場合は無効です。

この属性は

イベントを祖先要素にバインドするため、子要素上のイベントがトリガーされると、イベントは祖先要素にバブルアップされ、イベントは祖先要素の応答イベントを通じて処理されます。バブリングと委任を使用すると、イベント バインディングの数を減らし、プログラムのパフォーマンスを向上させることができます。

クリックされた要素を取得します。

イベントを祖先要素にバインドした後、祖先要素内でどの要素をクリックしても、祖先内の要素をクリックしたときに対応するイベントがトリガーされることのみを望みます。このとき、イベントを発生させたい要素であるかどうかの判定条件を与える必要があります。

target は、

イベントをトリガーした要素を返します。

構文: event.taget;

window.onload = function(){
     var ul = document.getElementById('ul1');
     ul.onclick = 関数(イベント){
         if(event.target.className == 'abq'){
             alert('イベントがトリガーされました!!')
         } 
     }
     // ハイパーリンクを追加します document.getElementById('bt1').onclick = function(){
         var li = document.createElement('li');
         li.innerHTML = "<a href = 'javascript:;' class='abq'>新しいタグ</a>";
         ul.appendChild(li);
     }
 

addEventListener() を通じてイベントをバインドします。

この

メソッドを通じて、複数の同一のイベント応答関数を同じ要素にバインドできます。

• パラメータ:

1. イベントの文字列
2. 。イベントがトリガーされたときにこの関数が呼び出されます。
3. デフォルトは

addEventListener()

同じイベントを同時に要素にバインドするには、イベントがトリガーされたときに、関数がバインドされている順序で応答関数が実行されるようにします。

window.onload = function(){
    var bt = document.getElementById('bt1');
    bt.addEventListener('クリック',function(){
        alert('最初のクリックに対応する関数がトリガーされました!')
    }、間違い）;
    bt.addEventListener('クリック',function(){
        alert('2 回目のクリックに対応する関数がトリガーされました!')
    }、間違い）;
    bt.addEventListener('クリック',function(){
        alert('3 回目のクリックに対応する関数がトリガーされました!')
    

イベントの配布

、

• イベントの配布について異なる理解があります。
  Microsoft は、イベントは内側から外側に伝播されるべきであると考えています。つまり、イベントがトリガーされると、現在の要素のイベントが最初にトリガーされ、次に現在の要素の祖先要素に伝播される必要があります。つまり、イベントは次のようになります。バブリング段階で実行されます。
  Netscape では、イベントは外側から内側に伝播されるべきであると考えています。つまり、現在のイベントがトリガーされると、現在の要素の最も外側の祖先要素のイベントが最初にトリガーされ、次に内側の子孫要素に伝播される必要があります。
• W3C は 2 社のソリューションを組み合わせて、イベントの伝播を 3 つの段階に分割します

1. 。 キャプチャ段階では、イベントは最も外側の祖先要素からターゲット要素までキャプチャされますが、デフォルトではこの時点ではイベントはトリガーされません。 。
2. ターゲット フェーズ イベントはターゲット要素をキャプチャし、キャプチャが終了し、ターゲット要素でイベントのトリガーを開始します。
3. バブリングフェーズイベントはターゲット要素からその祖先要素に渡され、順番に祖先要素でイベントをトリガーします。

応答関数はバブリングフェーズ中に実行されます。デフォルトの 3 番目のパラメータは false

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         アラート('ボックス1');
     }、間違い）;
     box2.addEventListener('click',function(){
         アラート('ボックス2');
     }、間違い）;
     box3.addEventListener('click',function(){
         アラート('ボックス3');
     }、間違い）;
 }

キャプチャフェーズ中にイベントをトリガーしたい場合は、addEventListener() の 3 番目のパラメータを true に設定できます。

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         アラート('ボックス1');
     }、真実）;
     box2.addEventListener('click',function(){
         アラート('ボックス2');
     }、真実）;
     box3.addEventListener('click',function(){
         アラート('ボックス3');
     }、真実）;
 }