您的位置：首页 > Web前端 > JavaScript

JavaScript的捕获和冒泡

2016-04-02 15:14 253 查看
今天，复习了一下捕获和冒泡，讲道理，以前看的好多东西都忘了。。


1、冒泡


先看一段代码，不是很复杂

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

</head>
<body>
<div id = "d1">
<div id="d2">
<div id ="d3" style="width: 100px;height: 100px;background: #000"></div>
</div>
</div>
<hr/>
<div id ="d4" style="width: 100px;height: 100px;background: #000"></div>
</body>
<script type="text/javascript">
$("#d1").click(function(){
alert("I am d1");
});
$("#d2").click(function() {
alert("I am d2");
});
$("#d3").click(function(){
alert("I am d3");
});
$("body").click(function(){
alert("I am body");
});
</script>
</html>


运行于chrome和IE浏览器，点击上面的黑块，分别弹出d3、d2、d1、body；点击下面的黑块，弹出body

这就是冒泡，从最精准的dom元素到最不精准的dom元素绑定的点击事件都会触发，只要你点了一下。。

那有时候应用的时候我们不需要冒泡带来的事件效果，那么如何阻止冒泡呢？再做个示范，将d2部分的click代码改成下面这个样子

$("#d2").click(function(event) {
alert("I am d2");
event.stopPropagation();
});


这时候打开chrome，我们发现弹出的只有d3、d2，点击事件在进入d2的事件函数中的时候，遇到stopPropagation()的函数，导致事件取消传播。

但是，在IE环境下运行却照旧会弹出d3、d2、d1、body，原来IE下是不兼容的。。。那只好改一改了

$("#d2").click(function(event) {
alert("I am d2");
if (event.stopPropagation) {
// this code is for Mozilla and Opera
event.stopPropagation();
//return false;
}
else if (window.event) {
// this code is for IE
window.event.cancelBubble = true;
//return false;
}
});


以上这段代码，在chrome下还是成功的，但是我的IE不知道出了啥鬼问题，源文件改了，但是IE打开之后是之前的文件，所以暂时还没测试，另外如果直接return false的话有，也会终止当前事件的传播的。但是现在由于特殊原因还没测试。

2、捕获

捕获就是，当触发点击事件的时候，会从祖先元素开始传播到子孙元素。谈到捕获，需要提到Js里的一个函数addEventListener(type,dosomething,true或者false)，

type是监听事件类型，dosomething是操作，true代表捕获过程中触发时间，false代表冒泡过程中触发时间，w3c标准中规定其事件触发顺序是

祖先元素 -----> 子孙元素 ----->祖先元素

实际上，就是先捕获，再冒泡

下面举个例子，还是之前的页面，不过更改了JavaScript

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function(){
var od1 = document.getElementById("d1");
var od2 = document.getElementById("d2");
var od3 = document.getElementById("d3");
var od4 = document.getElementById("d4");
od1.addEventListener('click',function(){
alert("I am d1");
},false);
od2.addEventListener('click',function(){
alert("I am d2");
},true);
}
</script>
</head>
<body>
<body>
<div id = "d1">
<div id="d2">
<div id ="d3" style="width: 100px;height: 100px;background: #000"></div>
</div>
</div>
<hr/>
<div id ="d4" style="width: 100px;height: 100px;background: #000"></div>
</body>
</body>
</html>


由于先捕获，则先弹出d2，然后在冒泡过程中再弹出d1，可以试着更改addEventListener的true和false看看弹出顺序的变化。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航