JavaScript的捕获和冒泡

最新推荐文章于 2016-05-20 15:00:10 发布

ruiy

最新推荐文章于 2016-05-20 15:00:10 发布

阅读量314

点赞数

分类专栏： JavaScript 文章标签：事件冒泡捕获

本文链接：https://blog.csdn.net/b2997215859/article/details/51043955

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天，复习了一下捕获和冒泡，讲道理，以前看的好多东西都忘了。。

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看看弹出顺序的变化。

ruiy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的捕获和冒泡

今天，复习了一下捕获和冒泡，讲道理，以前看的好多东西都忘了。。先看一段代码，不是很复杂 $("#d1").click(function(){ alert("I am d1"); }); $("#d2").click(function() { alert("I am d2"); }); $("#d3
复制链接

扫一扫

专栏目录