menu
more_vert
js事件冒泡与捕捉解析

作者:dayu

下面的例子可以证明事件的冒泡与捕捉的过程:
在此例中我们用到一个js函数:
addEventListener(event,listener,userCapture)
其中:event:就是监听的事件 listener:即要执行监听的函数 userCapture: false的时候是冒泡, true表示是捕获。


1.事件捕获
A:
<!DOCTYPE html>
<html>
<head>
<title>bubble</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#parent {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<divcontent="text/html; charset=UTF-8">
<style>
#parent {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<divcontent="text/html; charset=UTF-8">
<style>
#parent {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div>
parent
<button>child</button>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click",function(e){
alert("click-body");
},false);
parent.addEventListener("click",function(e){
alert("click-parent");
},false);
child.addEventListener("click",function(e){
alert("click-child");
},false);
document.body.addEventListener("click",function(e){
alert("body-capture");
},true);
parent.addEventListener("click",function(e){
alert("parent-capture");
},true);
child.addEventListener("click",function(e){
alert("child-capture");
},true);
</script>
</body>
</html>
输结果:
body-capture
parent-capture
click-child
child-capture
click-parent
click-body
事件是先捕获后冒泡,如上面所说的V型

3.阻止冒泡/阻止捕获

阻止冒泡需要 stopPropogation()函数
上栗B处代码,如果要在child执行完之后,阻止像parent冒泡则只需要将:
child.addEventListener("click",function(e){
console.log("click-child");
},false);
改为:
child.addEventListener("click",function(e){
console.log("click-child");
e.stopPropagation();
},false);

此时输出的结果就是:
click-child

阻止捕获也是同样方法,用stopPropogation()函数

将上栗A中的代码:
document.body.addEventListener("click",function(e){
console.log("click-body");
},false);
改为:
document.body.addEventListener("click",function(e){
console.log("body-capture");
e.stopPropagation();
},true);
则输出的结果是:
body-capture
body的下级就不能捕捉事件,捕捉不到事件,自然也就不能冒泡了。


以上是我对事件的冒泡和捕捉的理解,没有考虑不同浏览器对其的支持,以及不同浏览器处理的差别问题。
如有错误,欢迎指出
如有问题,欢迎提问

js事件冒泡与捕捉解析

原文地址:http://www.cnblogs.com/ycherry/p/7238765.html