JS事件冒泡
JavaScript 事件流描述的是从页面中接受事件的顺序。IE 和 Netscape 开发团队提出了两个截然相反的事件流概念，IE 的事件流是事件冒泡（event bubbling），Netscape 的事件流是事件捕获（event capturing）。
本节介绍事件冒泡，下节再介绍事件捕获。
事件冒泡：当一个元素接收到事件时，会把它接收到的事件逐级向上传播给它的祖先元素，一直传到顶层的 window 对象（关于最后传播到的顶层对象，不同浏览器有可能不同，例如 IE9 及其以上的 IE、FireFox、Chrome、Safari 等浏览器，事件冒泡的顶层对象为 window 对象，而 IE7/8 顶层对象则为 document对象）。
例如，在 Chrome 浏览器中，当用户单击了<div>元素，click 事件将按照 <div>→<body>→<html>→document→window 的顺序进行传播，如图 1 所示。事件冒泡可以形象地比喻为把一块石头投入水中，泡泡会一直从水底冒出水面，也就是说从下向上开始传播。
图 1：事件冒泡时事件的传播顺序
事件冒泡对所有浏览器都是默认存在的，且由元素的 HTML 结构决定，而不是由元素在页面中的位置决定，所以即便使用定位或浮动使元素脱离父元素的范围，单击元素时，其依然存在冒泡现象。
使用 addEventListener() 绑定事件，当第三个参数为 false 时，事件为冒泡；为 true 时，事件为捕获。而使用事件源对象的事件属性绑定事件函数以及使用 HTML 标签事件属性绑定事件函数的事件流都是事件冒泡。
【例 1】事件冒泡演示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡演示</title>
<style>
div{padding:30px;}
#div1{background:red;}
#div2{background:green;}
#div3{background:blue;position:absolute;top:200px;}
</style>
<script>
window.onload = function(){
//获取各个元素
var oBody = document.getElementById('body1');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
//对各个元素的单击事件绑定事件处理函数fn1
window.onclick = fn1;
document.onclick = fn1;
oBody.onclick = fn1;
oDiv1.onclick = fn1;
//oDiv2.onclick = fn1;
oDiv3.onclick = fn1
function fn1(){//定义事件处理函数
console.log(this);
}
};
</script>
</head>
<body id="body1">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
例 1 对获取到的各个元素都使用事件属性绑定事件处理函数，因而这些元素都会实现事件冒泡。当单击 div3 时，div3 作为事件冒泡的最低层元素，会首先触发单击事件，在 Chrome 浏览器中的运行结果如图 2 所示。
图 2：事件冒泡运行结果
由图 2 可见，虽然 div3 因为绝对定位而脱离了文档，但其所触发的事件仍然会逐级向上传递单击事件给 div2、div1、document 和 window，即便注释掉 div2 的单击事件。
在前面介绍了，addEventListener() 的第三个参数取 false 值时，将会实现事件冒泡。下面通过示例 2 演示使用 addEventListener() 实现事件冒泡。
【例 2】使用 addEventListener() 实现事件冒泡。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用addEventListener()实现事件冒泡</title>
<style>
div{padding:30px;}
#div1{background:red;}
#div2{background:green;}
#div3{background:blue;position:absolute;top:200px;}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
//调用addEventListener()实现事件冒泡
oDiv1.addEventListener('click',fn1,false);
oDiv2.addEventListener('click',fn1,false);
oDiv3.addEventListener('click',fn1,false);
function fn1(){
console.log(this);
}
};
</script>
</head>
<body id="body1">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
例 2 中 div1、div2 和 div3 元素均使用第三个参数为 false 的 addEventListener() 绑定事件函数，因而这 3 个元素将实现事件冒泡。在 Chrome 浏览器中运行后，当单击 div3 时，div3 作为事件冒泡的最低层元素，会首先触发单击事件，然后 div3 逐级向上传递单击事件给 div2 和 div1。
例 2 在 Chrome 浏览器中的运行结果如图 3 所示。由图 3 可见事件的接受顺序为 div3→div2→div1。
图 3：使用 addEventListener() 实现事件冒泡
事件冒泡在实际应用中有时会给我们带来便利，例如示例 3 的“分享”功能就是使用了事件冒泡来实现的。
【例 3】使用事件冒泡实现“分享”功能。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用事件冒泡实现"分享"功能</title>
<style>
#div1{width:80px;height:150px;border:black 1px solid;position:absolute;
left:-82px;top:100px;}
#div2{width:30px;height:70px;position:absolute;right:-30px;top:45px;
background:black;color:white;text-align:center;}
ul{list-style:none;padding:0 20px;}
img{width:36px;height:39px;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){//鼠标光标移入，使div1显示
this.style.left = '0px';
}
oDiv.onmouseout = function(){//鼠标光标移出，使div1隐藏
this.style.left = '-82px';
}
};
</script>
</head>
<body>
<div id="div1">
<ul>
<a href="#"><li><img src="images/qq.png"/></li></a>
<a href="#"><li><img src="images/sina.png"/></li></a>
<a href="#"><li><img src="images/renren.png"/></li></a>
</ul>
<div id="div2">分享到</div>
</div>
</body>
</html>
例 3 在 Chrome 浏览器中运行后的初始状态如图 4 所示。
图 4：初始状态
当我们将鼠标光标移到 div2（“分享到”）上后，div2 的鼠标光标移入事件将会传递给它的父级元素 div1（图标列表），因而此时会触发 div1 的鼠标光标移入事件，而使 div1 显示出来，结果如图 5 所示。
图 5：鼠标光标移入“分享到”后的状态
当将鼠标光标从 div2 移开时，div2 的鼠标光标移开事件同样会传递给 div1，从而触发 div1 的鼠标光标移开事件，而使 div1 隐藏起来，即回到图 4 所示状态。
在程序开发时，事件冒泡在某些时候会带来便利，但有时却又会带来不好的影响，此时就需要阻止事件冒泡。所有标准浏览器（IE9 及其以上版本、Chrome 和 Firefox）都通过事件对象调用 stopPropagation() 来实现事件冒泡的阻止。
注：IE7/8 等非标准的 IE 只能使用设置事件对象的 cancelBubble 属性值为 true 的方法来阻止事件冒泡。
阻止事件冒泡的方法格式如下：
事件对象.stopPropagation();//针对标准浏览器
下面通过示例 4 来演示事件冒泡的阻止。
【例 4】事件冒泡的阻止。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阻止事件冒泡</title>
<style>
#div1{width:100px;height:200px;border:1px solid red;display:none;}
</style>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(ev){
//阻止事件冒泡的兼容处理：
ev.stopPropagation();
oDiv.style.display = 'block';//显示div
};
document.onclick = function(){
oDiv.style.display = 'none';//隐藏div
}
};
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn" value="显示DIV"/>
</body>
</html>
例 4 的作用是单击按钮时，显示 div，如图 6 所示；
图 6：单击按钮显示 div
再单击除按钮以外的其他地方则隐藏 div，如图 7 所示。
图 7：单击除按钮以外的其他地方隐藏 div
由示例 JS 代码，可知 button 和 document 两个元素都使用了事件属性来绑定单击事件处理函数，因而它们将会实现事件冒泡。因而当单击按钮时，如果不阻止 button 元素的事件冒泡，button 触发的单击事件将会传递到 document。
根据事件冒泡的事件接受顺序，可知单击按钮后将显示 div，但因为事件冒泡，document 接着也触发了单击事件，而其却是隐藏 div，这样最终的运行结果是，单击按钮后将永远都无法显示 div。可见，要实现我们所要求的功能，就必须在单击按钮后，只有 button 触发单击事件，这就需要阻止 button 的事件冒泡。
湘公网安备 43102202000103号