您的位置：首页 > 其它

解析：浏览器事件冒泡及事件捕获

2014-03-03 16:48 316 查看

今天的效率有点奇葩，说高吧，一个上午做了不少事。说低吧，因为一个分布式的算法花了我不少时间，终于有点头绪。估计明天会写一篇文章来讲述一下自己的看法。

而今天，还是回到前端。今天来说说事件冒泡和事件捕获。首先肯定是概念：什么是事件冒泡？什么是事件捕获？

简单地说，事件冒泡和事件捕获都是一种事件传递的机制。这种机制可以使事件在不同级的元素间传递。事件冒泡是从事件触发的源节点，向父节点传递，直到到达最顶节点。而事件捕获则是从最顶节点，逐步向下传递，直到到达事件触发的源节点。

在一些标准的浏览器中，如Chrome、Firefox等，支持这两种冒泡方式。而事实上，准确的说，是这两种方式的混合方式。因为W3C采取的就是这两种方式的结合：先从顶级节点开始，将事件向下传递至源节点，再从源节点冒泡至顶节点。

而在IE及Opera（以下说的都是老版本的欧朋，新版本的欧朋经检测是支持事件捕获的）下，是不支持事件捕获的。而这个特点最明显体现在事件绑定函数上。

IE、Opera的事件绑定函数是attachEvent，而Chrome等浏览器则是addEventListener，而后者比前者的参数多了一个——这个参数是一个布尔值，这个布尔值由用户决定，用户若设为true，则该绑定事件以事件捕获的形式参与，若为false则以事件冒泡的形势参与。而这个参数在IE和Opera浏览器中是不存在的——根本原因是它们不支持事件捕获。

下面我来提供一个例子让大家更好地理解事件冒泡和事件捕获(本来想用flex布局，后来想偷懒，所以还是算了，大家不要注意细节(*^__^*) 嘻嘻……)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin: 0 auto;
}
#ele1 {
width: 500px;
height: 500px;
background: green;
line-height: 500px;
text-align: center;
}
#ele2 {
width: 300px;
height: 300px;
line-height: 300px;
background: blue;
text-align: center;
display: inline-block;
vertical-align: middle;
}
#ele3 {
width: 200px;
height: 200px;
background: red;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="ele1">
<div id="ele2">
<div id="ele3"></div>
</div>
</div>
<a id="test" href="http://baidu.com/">click</a>
<script type="text/javascript">
window.onload = function() {
var e1 = document.getElementById('ele1');
var e2 = document.getElementById('ele2');
var e3 = document.getElementById('ele3');
var link = document.getElementById('test');
e1.addEventListener('click',function(evt) {
console.log('ele1-click');
},true);
e2.addEventListener('click',function(evt) {
console.log('ele2-click');
});
e3.addEventListener('click',function(evt) {
console.log('ele3-click');
evt.stopPropagation();
});
link.addEventListener('click',function(evt) {
console.log('^_^，I have stopped it!')
evt.preventDefault();
});
};
</script>
</body>
</html>

可以留意到，我在例子中还增加了一个preventDefault的例子，因为我看到网上许多文章都把它和stopPropagation放在一起讨论，所以这里也让大家了解一下。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航