Javascript-バブルのソートとイベントのバブルの阻止

イベントが発生すると、要素ノード間で特定の順序で伝播されます.この伝播プロセス、すなわちDOMイベントストリームです.
JSコードでは、キャプチャまたはバブルのうちの1つのフェーズonclickおよびattachEventのみが得られるバブルフェーズaddEventListener(type,listener[,useCapture])の3番目のパラメータがtrueであれば、イベントキャプチャフェーズでイベントハンドラを呼び出すことを示す.false(デフォルトではfalseと書かない)の場合、イベントバブルフェーズでイベントハンドラが呼び出されることを示します.
DOMイベントフローの3段階

JSコードでは、キャプチャまたはバブルの1つのフェーズ

しか実行できません.

onclickおよびattachEvent(ie)は、発泡段階

のみを得ることができる.

取得フェーズaddEventListenerの3番目のパラメータがtrueの場合、document->html->body->father->son

取得フェーズ

<script>
        var son = document.querySelector('.son');
        son.addEventListener('click',function(){
     
            alert('son');
        },true);
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
     
            alert('father');
        },true);
</script>

バブルフェーズ:addEventListenerの3番目のパラメータがfalseまたは省略の場合、バブルフェーズ:son->father->body->html->document

<script>
        var son = document.querySelector('.son');
        son.addEventListener('click',function(){
     
            alert('son');
        },false);
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
     
            alert('father');
        },false);
        document.addEventListener('click',function(){
     
			alert('document');
		})
</script>

onblur,onfocus,onmouseenter,onmouseleaveなどのイベントは泡が出ていません
イベントバブルを阻止する2つの方法:イベントバブル:最初は最も具体的な要素によって受け入れられ、DOM最上位ノードのイベントバブル自体に段階的に伝播する特性は、デメリットをもたらし、メリットをもたらします.

<script>
    if(e&&e.stopPropagation){
     
        e.stopPropagation();
    }else{
     
        window.event.cancelBubble=true;
    }
</script>

イベント委任(エージェント/委任):jQueryではイベント委任と呼ぶ.原理:親ノードにリスナーを追加し、イベントバブルを使用して各サブノードに影響を与えます.各サブノードに個別にイベントリスナーを設定するのではなく、イベントリスナーを親ノードに設定し、バブル原理の影響で各サブノードを設定します.
例:ulにクリックイベントを登録し、イベントオブジェクトのtargetを利用して現在クリックしているliを見つけます.liをクリックすると、イベントがulに浸かり、ulに登録イベントがあり、イベントリスナーがトリガーされます.
役割:DOMを1回操作するだけで、プログラムの性能が向上します.

<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function(e){
     
        e.target.style.backgroundColor = 'pink';
    })
</script>