您的位置：首页 > 其它

28、事件捕获

2016-07-12 20:03 253 查看

PS：这里是我从别人的博客中学习事件捕获和冒泡是的总结，如果你也感兴趣的话，建议你点击链接查看原博客的内容，他们写的都是很经典！

对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，都支持事件冒泡，即事件由子元素向祖先元素传播的，就像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中，事件传播还有个阶段，那就是捕获阶段，这个很少有用武之地，所以被人疏忽遗忘也在所难免了，不常用不代表它不存在，本着科学严谨的态度，我们有必要去看一下它的庐山真面目。

事件捕获：

事实上，捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，和一个石子儿从水面向水底下沉一样，要说明的是在 IE，opera浏览器中，是不存在这个阶段的。从各浏览器提供的注册事件监听的方法中可见一斑，例如适用于ie,opera的attachEvent，有两个参数，attachEvent(”on”+type,fn)，而适用于所谓标准浏览器的addEventListener则有三个参数，addEventListener(type,fn,boolean)，前面两个参数不用解释，第三个参数boolean，就是决定注册事件发生在捕
获阶段还是冒泡阶段，具体参考如下：

事件捕获：

按照以下顺序执行：

1）假设父级有捕获的事件，先执行最高级父级的捕获事件，以此类推。

2）然后执行事件源：看捕获和不捕获的位置，谁在前面谁先。

3）最后再从低到高执行父级的不捕获事件。

<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="utf-8">
<meta name="Author" content="">
<style type='text/css'>
*{ margin:0; padding:0;}
#box1,#box2,#box3{
padding:50px;
}
#box1{
background:red;
}
#box2{
background:blue;
}
#box3{
background:green;
}
</style>
</head>

<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>

<script type="text/javascript">

var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var oBox3 = document.getElementById('box3');

oBox2.addEventListener('click' , f2 , true);
oBox3.addEventListener('click' , f3 , true);
oBox1.addEventListener('click' , f1 , true);

oBox2.addEventListener('click' , f22 , false);
oBox3.addEventListener('click' , f33 , false);
oBox1.addEventListener('click' , f11 , false);

// 1   2   3   33    22    11

function f1(){
alert(1);
}
function f2(){
alert(2);
}
function f3(){
alert(3);
}
function f11(){
alert(11);
}
function f22(){
alert(22);
}
function f33(){
alert(33);
}
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航