1.冒泡排序实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bubble</title>
<style>
button{
background: red;
color:white;
}
#third{
width: 50px;
height: 50px;
border:thin solid red;
}
#second{
width: 100px;
height: 100px;
border:thin solid red;
}
#first{
width:200px;
height: 200px;
border:thin solid red;
}
</style>
</head>
<body>
<div id="first">
<div id="second" >
<div id="third" >
<button id="button">事件冒泡</button>
</div>
</div>
</div>
<script>
document.getElementById("button").addEventListener("click",function(){
alert("button");
},false);//如果不添加false，默认为冒泡
document.getElementById("third").addEventListener("click",function(){
alert("third");
},false);
document.getElementById("second").addEventListener("click",function(){
alert("second");
},false);
document.getElementById("first").addEventListener("click",function(){
alert("first");
},false);
</script>
</body>
</html>
现象：可以看到虽然我们只点击了botton元素，但是botton外的事件依次被促发，触发的顺序为DOM树的最下层到DOM树的最上层。
2.怎么阻止冒泡
调用函数stopPropagation()
上述的事件botton事件处理如下：
document.getElementById("button").addEventListener("click",function(event){
alert("button");
event.stopPropagation();
},false);
这样点击botton只会显示一个弹窗
二.捕获事例：
只需要将上述中addEventListener中将false改为ture，怎么阻止捕获，同样可以再需要阻止的节点添加事件stopPropagation();
document.getElementById("second").addEventListener("click",function(event){
alert("button");
event.stopPropagation();
},true);
结果：指挥弹出first，second
补充：DOM3新增函数：event.stopImmediatePropagation()
VSstopPropagation()
若同一元素上绑定多个事件，若使用前者将同时被阻止，后者将只阻止当前的事件传递到父元素。
祥情参照：
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation
网友评论