JS事件的三个阶段以及冒泡和事件对象event

最新推荐文章于 2021-03-18 14:45:24 发布

豆趣编程

最新推荐文章于 2021-03-18 14:45:24 发布

阅读量3.9k

点赞数 2

分类专栏：前端文章标签：阻止冒泡

本文链接：https://blog.csdn.net/lianzhang861/article/details/80776379

版权

前端专栏收录该内容

61 篇文章 6 订阅

订阅专栏

js事件的三个阶段分别为：捕获、目标、冒泡

1.捕获：事件由页面元素接收，逐级向下，到具体的元素
2.目标：具体的元素本身
3.冒泡：跟捕获相反，具体元素本身，逐级向上，到页面元素

事件捕获：当使用事件捕获时，父级元素先触发，子元素后触发
事件冒泡：当使用事件冒泡时，子级元素先触发，父元素后触发

IE5.5：div---body---document

IE6.0: div---body---html---document

主流浏览器:div---body---html---document---window

W3C ：任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达事件源，再从事件源向上进行事件捕获
标准浏览器：addEventListener("click","doSomething","true")方法,若第三参数为true则采用事件捕获，若为false，则采用事件冒泡
IE浏览器只支持事件冒泡，不支持事件捕获，所以它不支持addEventListener("click","doSomething","true")方法,所以ie浏览器使用ele.attachEvent("onclick",doSomething)

事件传播的阻止方法：

再W3C中，使用stopPropagation()方法（无论是捕获阶段还是冒泡阶段都可以阻止）

在IE下使用cancelBubble = true方法

阻止默认行为：

再W3c中，使用preventDefault（）方法

再IE下return false

this和e.target的异同

每次触发DOM事件时会产生一个事件对象（也称event对象），此处的参数e接收事件对象,e为事件对象。而事件对象也有很多属性和方法，其中target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值。

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js">
			
		</script>
		<style type="text/css">
			*{
				padding:0;margin:0;
			}
		</style>
	</head>
	<body>
		<div id="parent" style="width:200px;height: 200px;background: blue;">
		    <div id="son1" style="width:100px;height: 100px;background:red;"></div>
		    <div id="son2" style="width:100px;height:100px;background: yellow;"></div>
		</div>
		<script type="text/javascript">
			var parent=document.getElementById("parent")
			var son1=document.getElementById("son1")
			var son2=document.getElementById("son2")
			parent.addEventListener("click",function(e){
				alert(1)
				
			},true)
			
			son1.addEventListener("click",function(e){
				alert(2)
			},true)
			
			son2.addEventListener("click",function(e){
				alert(3)
			},true)
			
		</script>
		
	</body>
</html>

当参数为true时，为捕获阶段。点击子元素，会从最外面开始触发，一直到作用事件的元素为止。

当参数为false时，为冒泡阶段，点击子元素，从作用事件元素开始，一直触发到最外面，一般是到window。

如果想阻止捕获或者冒泡，只需要写e.stopPropagation()即可。

注意，无论阻止冒泡还是阻止捕获，都是用e.stopPropagation()

阻止冒泡栗子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:;" onclick="setCategory(event)" id="testA"></a>
		
		<script type="text/javascript">
			function setCategory(e){
		        //如果提供了事件对象，则这是一个非IE浏览器 
				if ( e && e.stopPropagation ) 
				    //因此它支持W3C的stopPropagation()方法 
				    e.stopPropagation(); 
				else 
				    //否则，我们需要使用IE的方式来取消事件冒泡 
				    window.event.cancelBubble = true; 
		    }
			//或者
			var a = document.getElementById("testA");
			a.onclick =function(e){
				//如果提供了事件对象，则这是一个非IE浏览器 
				if ( e && e.stopPropagation ) 
				    //因此它支持W3C的stopPropagation()方法 
				    e.stopPropagation(); 
				else 
				    //否则，我们需要使用IE的方式来取消事件冒泡 
				    window.event.cancelBubble = true; 
			}
		</script>
	</body>
</html>

豆趣编程

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS事件的三个阶段以及冒泡和事件对象event

js事件的三个阶段分别为：捕获、目标、冒泡 1.捕获：事件由页面元素接收，逐级向下，到具体的元素 2.目标：具体的元素本身 3.冒泡：跟捕获相反，具体元素本身，逐级向上，到页面元素事件捕获：当使用事件捕获时，父级元素先触发，子元素后触发事件冒泡：当使用事件冒泡时，子级元素先触发，父元素后触发IE5.5：div---body---document IE6.0...
复制链接

扫一扫