js事件流
1.什么是事件流
JS事件流最早要從IE和網(wǎng)景公司的瀏覽器大戰(zhàn)說(shuō)起舍悯，IE提出的是冒泡流戒祠，而網(wǎng)景提出的是捕獲流弥臼，后來(lái)在W3C組織的統(tǒng)一之下，JS支持了冒泡流和捕獲流朝群，但是目前低版本的IE瀏覽器還是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)燕耿，所以為了能夠兼容更多的瀏覽器，建議大家使用冒泡流姜胖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{width: 200px;height: 200px;background: #f00;}
.inner{width: 100px;height: 100px;background: #0f0;}
</style>
</head>
<body>
<div class="box">
<div class="inner">
</div>
</div>
<script>
var oBox=document.getElementsByClassName('box')[0];
var oInner=document.getElementsByClassName('inner')[0];
oBox.onclick=function(){
console.log('我是大盒子');
}
oInner.onclick=function(){
console.log('我是小盒子');
}
</script>
</body>
</html>
測(cè)試以上代碼誉帅，就會(huì)發(fā)現(xiàn)，當(dāng)你點(diǎn)擊inner小盒子的時(shí)候右莱，會(huì)先后觸發(fā)兩個(gè)事件蚜锨，先輸出‘我是小盒子’，在輸出‘我是大盒
子’慢蜓，這個(gè)結(jié)果就跟事件流有關(guān)了踏志，關(guān)于事件流，請(qǐng)看下圖：
728493-20161002131045707-149289063.png
從圖中我們可以知道
1胀瞪、一個(gè)完整的JS事件流是從window開始针余，最后回到window的一個(gè)過(guò)程
2、事件流被分為三個(gè)階段(15)捕獲過(guò)程凄诞、(56)目標(biāo)過(guò)程圆雁、(6~10)冒泡過(guò)程
3、在冒泡過(guò)程中6比7早觸發(fā)帆谍，也就解釋了上面那題伪朽，為什么btn1,會(huì)比content先觸發(fā)
