聽(tīng)過(guò)冒泡嗎，聽(tīng)過(guò)捕獲嗎，是否會(huì)覺(jué)得很熟悉，但是讓你具體的回答，卻又說(shuō)不上什么所以然。
w3c約定的事件觸發(fā)分為三個(gè)階段，順序?yàn)?code>捕獲階段，目標(biāo)階段，冒泡階段
捕獲階段時(shí)，先觸發(fā)最上層父元素的捕獲階段綁定函數(shù)，即從外層到里層先觸發(fā)，直至到達(dá)目標(biāo)元素,進(jìn)入目標(biāo)階段
目標(biāo)階段時(shí)，按照綁定順序觸發(fā)目標(biāo)元素的綁定函數(shù)，結(jié)束后，進(jìn)入冒泡階段
冒泡階段時(shí)，觸發(fā)上一級(jí)父元素的冒泡階段綁定函數(shù)，即從里層到外層觸發(fā)，
target.addEventListener(name,handle,useCapture)
userCapture為true時(shí)，表示在捕獲階段觸發(fā)
userCapture為false時(shí)，表示在冒泡階段觸發(fā)
event.stopPropagation()
該方法將停止事件的傳播，阻止它被分派到其他 Document 節(jié)點(diǎn)。在事件傳播的任何階段都可以調(diào)用它。注意，雖然該方法不能阻止同一個(gè) Document 節(jié)點(diǎn)上的其他事件句柄被調(diào)用，但是它可以阻止把事件分派到其他節(jié)點(diǎn)
實(shí)例：
// html 片段
<div id="div1" style="background: blue;width: 100px; height: 100px;">
<div id="div2" style="background: red;width: 70px; height: 70px;">
<div id="div3" style="background: yellow;width: 50px; height: 50px;"></div>
</div>
</div>
// js 代碼
var oDvi1 = document.getElementById('div1'),
oDvi2 = document.getElementById('div2'),
oDvi3 = document.getElementById('div3');
oDvi1.addEventListener('click', handle1, true);
oDvi2.addEventListener('click', handle2, false);
oDvi3.addEventListener('click', handle3, true);
function handle1(){ //藍(lán)
alert(123);
}
function handle2(){ //紅
alert(345);
}
function handle3(){//黃
alert(456);
}
點(diǎn)擊div3,結(jié)果為123，456，345，總結(jié)：
捕獲階段：外=》里，在div1出檢測(cè)useCapture 是否為true,是則觸發(fā)函數(shù)，div2同理，
目標(biāo)階段：發(fā)現(xiàn)div3就是鼠標(biāo)點(diǎn)擊的階段，所以進(jìn)入目標(biāo)階段，對(duì)于目標(biāo)元素的所有回調(diào)，按照綁定順序執(zhí)行。執(zhí)行完畢，進(jìn)入冒泡階段
冒泡階段：里=》外，在div2出檢測(cè)useCapture是否為false,是則執(zhí)行，div1同理
或許下面這個(gè)例子更能說(shuō)明這一點(diǎn):
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
<div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:green; z-index:1">
<div id="id3" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:yellow; z-index:2">
</div>
</div>
</div>
</body>
<script>
console.log('點(diǎn)擊id3')
document.getElementById('id1').addEventListener('click', function() { console.log('id1 maopao');}, false);
document.getElementById('id1').addEventListener('click', function() { console.log('id1 capuse');}, true);
document.getElementById('id2').addEventListener('click', function() { console.log('id2 maopao');}, false);
document.getElementById('id2').addEventListener('click', function() { console.log('id2 capuse');}, true);
document.getElementById('id3').addEventListener('click', function() { console.log('id3 maopao');}, false);
document.getElementById('id3').addEventListener('click', function() { console.log('id3 capuse');}, true);
</script>
</html>
運(yùn)行結(jié)果如圖：
運(yùn)行結(jié)果.png
