從捕獲階段 到 目標(biāo)階段 再到 冒泡階段 的過程稱為事件流。
先執(zhí)行捕獲再執(zhí)行冒泡
如果事件綁定的是目標(biāo)元素嘶摊， 那么是按照綁定事件函數(shù)的先后順序來依次執(zhí)行（跟捕獲冒泡沒關(guān)系）
DOM0捕獲不到捕獲階段评矩，只有冒泡階段.
從window 到 目標(biāo)點(diǎn)的階段 叫捕獲階段
在捕獲的過程中
如果上級(jí)和下級(jí)(祖先級(jí)關(guān)系)綁定同一事件函數(shù)
那么先觸發(fā)上級(jí)的在觸發(fā)下級(jí)的
從目標(biāo)點(diǎn)由下而上 直到window 叫做冒泡階段
在這個(gè)過程中，如果上級(jí)和下級(jí)同理有祖先關(guān)系
綁定同一事件函數(shù) 先觸發(fā)目標(biāo) 再觸發(fā)目標(biāo)的上級(jí)
這整個(gè)過程叫做事件流 事件模型
box1.addEventListener(不帶on的事件名,function(){
alert('red');
},是否捕獲);
捕獲就為: true
冒泡就為:false （默認(rèn)）
image.png
來看看以下輸出的是什么把
<div id="box1">
<div id="box2">
<div id="box3">
<button id="btn">按鈕</button>
</div>
</div>
</div>
function fn(){alert('btn1');}
btn.addEventListener('click',fn,true);
btn.addEventListener('click',function(){
alert(1);},true);
btn.addEventListener('click',function(){
alert(2);},true);
box1.addEventListener('click',function(){alert('red');});
btn.addEventListener('click',fn,true);
box3.addEventListener('click',function(){alert('yellow');},true);
box2.addEventListener('click',function(){alert('blue');},true);
box2.addEventListener('click',function(){ alert('green');});
btn.addEventListener('click',function(){alert('btn捕獲');},true);
btn.addEventListener('click',fn,false);
btn.addEventListener('click',function(){alert('btn冒泡');});
btn.addEventListener('click',function(){alert('btn冒泡2');});
阻止冒泡：
ev.stopPropagation()
IE 低版本：ev.cancelBubble = true;
取消冒泡后，事件不會(huì)再向上傳播蔗喂；更高層級(jí)的元素的對(duì)應(yīng)事件不會(huì)觸發(fā)；
