JSイベントフローメカニズム

イベントフローとは
1.ノードのキャプチャ2.イベントの処理3.イベントのバブル
現在、イベントバブルフロー、イベントキャプチャフローに分けられている.
違い:1.イベントバブルフローは、イベントバブルフェーズでイベントに応答する2.イベントキャプチャフローは、キャプチャノードプロセスでイベントに応答する.3.ほとんどのブラウザでは、イベントの使用に応答するためにイベントソースのバブルフローがデフォルトで使用されます.addEventListenerの最後のパラメータは、trueではイベントキャプチャモード、falseではイベントバブルモードの使用を表します.
イベントバブルフローは、対応する要素にどのようにバインドされますか?どのように応答しますか?
1.ルート要素htmlからid=「getCopy」の要素が見つかるまで1級1級内を探す2.この要素のためにclickイベントを処理する3.イベントバブル法に従ってこの要素からルートノードまで1級1級外へイベントに応答する

var btn = document.getElementById('getCopy');
btn.addEventListener('click',  function(){
    console.log('btn click');
}, false);

イベントキャプチャストリームは、対応する要素にどのようにバインドされますか?どのように応答しますか?
1.ルート要素htmlから内を探し、id=「getCopy」の要素が見つかるまで1級1級内応答イベントを探します.2.この要素のためにclickイベントを処理します.3.この要素から1級1級外のイベントに泡が立ち、ルートノードまで

var btn = document.getElementById('getCopy');
btn.addEventListener('click',  function(){
    console.log('btn click');
}, true);

addEventListenerは同じ要素で同じイベントとメソッドをバインドし、後者は前の要素を上書きします.

var btn = document.getElementById('getCopy');
var btnFun = function(){
    console.log('btn click');
}
btn.addEventListener('click', btnFun, false);//         
btn.addEventListener('click', btnFun, false);//   btn click

addEventListenerは同じ要素で同じイベントと異なるメソッドをバインドし、後の要素は前の要素を上書きしません.

var btn = document.getElementById('getCopy');
btn.addEventListener('click', function(){
    console.log('btn click1');//   btn click1
}, false);
btn.addEventListener('click', function(){
    console.log('btn click2');//   btn click2
}, false);

イベントの発泡を阻止するstopPropagation

btn.addEventListener('click', function(event){
    console.log('btn click2');//   btn click2
    event.stopPropagation();
}, false);