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

梦里梦外; 2022-05-22 11:08 189阅读 0赞

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的异同][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>

![70][]

当参数为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>

[this_e.target]: https://www.cnblogs.com/longailong/p/6559585.html
[70]: /images/20220522/3d132129986347ac8cd0f24074bb6912.png