javascript事件流
2017-08-30 本文已影响18人
ITtian
听过冒泡吗，听过捕获吗，是否会觉得很熟悉，但是让你具体的回答，却又说不上什么所以然。
w3c约定的事件触发分为三个阶段，顺序为捕获阶段，目标阶段，冒泡阶段
捕获阶段时，先触发最上层父元素的捕获阶段绑定函数，即从外层到里层先触发，直至到达目标元素,进入目标阶段
目标阶段时，按照绑定顺序触发目标元素的绑定函数，结束后，进入冒泡阶段
冒泡阶段时，触发上一级父元素的冒泡阶段绑定函数，即从里层到外层触发，
target.addEventListener(name,handle,useCapture)
userCapture为true时，表示在捕获阶段触发
userCapture为false时，表示在冒泡阶段触发
event.stopPropagation()
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点
实例：
// 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(){ //蓝
alert(123);
}
function handle2(){ //红
alert(345);
}
function handle3(){//黄
alert(456);
}
点击div3,结果为123，456，345，总结：
捕获阶段：外=》里，在div1出检测useCapture 是否为true,是则触发函数，div2同理，
目标阶段：发现div3就是鼠标点击的阶段，所以进入目标阶段，对于目标元素的所有回调，按照绑定顺序执行。执行完毕，进入冒泡阶段
冒泡阶段：里=》外，在div2出检测useCapture是否为false,是则执行，div1同理
或许下面这个例子更能说明这一点:
<!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('点击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>
运行结果如图：
运行结果.png
