javascript事件のメカニズム

js事件のメカニズム
前端は面接の時、よくjsの事件の構造の原理と使用方法に出会います.私も最初はずっとあいまいでした.文書をよく見て、勉強したことをまとめてみました.
イベントフローは、特定のデータ構造に沿ってイベントが伝播するプロセスである.発泡と捕獲はDOMにおけるイベントフローの二つの異なる伝搬方法である.
イベントフローは三つの段階があります.1.イベント捕獲段階2.目標段階3.イベントの泡立ち段階
捕獲と発泡とは?
くりを一つあげる:

<div id="div1">
        <div id="div2"></div>
    </div>
    
    <script>
        let div1 = document.getElementById('div1');
        let div2 = document.getElementById('div2');
        
        div1.onClick = function(){
            alert('1')
        }
        
        div2.onClick = function(){
            alert('2');
        }
    
    </script>

div 2をクリックすると、2つのポップアップボックスがイジェクトされます.ie 8/9/10、chromeブラウザで、先に“2”を弾いてから“1”を弾いて、これはイベントの泡が立ちます.イベントは一番下のノードから上に泡が広がっています.事件の逮捕は事件の泡が立つのとは逆である.W 3 Cの基準は、最初に捕獲してから泡を発生させることであり、addEventListenerの第3のパラメータは、イベントを捕獲するかそれとも発泡するかを決定する.
addEventListener関数はとにかくtrueを覚えておきます.falseは泡です.

obj.addEventListener("click", func, true); //     
obj.addEventListener("click", func, false); //     

しかし、IE 9以下はaddEvent Listener関数をサポートしていません.IEブラウザはatachEvent関数を使って代替します.
互換性のある書き方

if(window.addEventListener){
        //chrom firefor ...
        object.addEventListener('click',function(){
        },false);
    }
    else if(window.attachEvent){
        //IE
        object.attachEvent('onclick',function(){})
    }
    else{
        object.onclick = function(){}
    }

イベントフロー停止

event.stopPropagation();         

event.stopImmediatePropagation();