JavaScript 事件流描述的是从页面中接受事件的顺序。IE 和 Netscape 开发团队提出了两个截然相反的事件流概念,IE 的事件流是事件冒泡(event bubbling),Netscape 的事件流是事件捕获(event capturing)。
上节已经介绍了事件冒泡,这节继续介绍事件捕获。
事件捕获是由 Netscape Communicator 团队提出来的,从最顶层的 window 对象开始逐渐往下传播事件,即最顶层的 window 对象最早接收事件,最低层的具体被操作的元素最后接收事件。例如,当用户单击了<div>元素,采用事件捕获,则 click 事件将按照 window→document→<html>→<body>→<div> 的顺序进行传播,如图 1 所示。
使用 addEventListener() 绑定事件函数时,当第三个参数取值为 true 时,将执行事件捕获,除此之外的其他事件的绑定方式,都是执行事件冒泡。可见,只有标准浏览器才能进行事件捕获。
【例 1】事件捕获。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕获</title>
<style>
div{padding:40px;}
#div1{background:red;}
#div2{background:green;}
#div3{background:blue;position:absolute;top:300px;}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
//事件捕获
oDiv1.addEventListener('click',fn1,true);
oDiv2.addEventListener('click',fn1,true);
oDiv3.addEventListener('click',fn1,true);
window.addEventListener('click',fn1,true);
document.addEventListener('click',fn1,true);
//定义事件函数
function fn1(){
console.log(this);
}
};
</script></head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
上述 JS 代码分别对 window、document、div1、div2 和 div3 元素调用 addEventListener() 绑定事件函数,而且这些 addEventListener() 的第三个参数都为 true,因而前述 5 个元素都实现了事件捕获。当单击 div3 节点时,单击事件的接收顺序为 window→document→div1→div2→div3,在 Chrome 浏览器中的运行结果如图 2 所示。