JavaScript面试题：事件冒泡，事件捕获，DOM事件流

雨点打透心脏的1/2处 2022-05-17 05:42 290阅读 0赞

## 一、事件冒泡和事件捕获： ##

事件冒泡和捕获只有DOM2级支持。DOM0级和IE只支持事件冒泡。  
       1、事件冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；  
             从具体的元素到不确定的元素。  
        2、事件捕获：  
             从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。  
             从不确定的元素到具体的元素；

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#grandpaDiv{
    				width:400px;
    				height:400px;
    				background-color:red;
    			}	
    			#fatherDiv{
    				width:300px;
    				height:300px;
    				background-color:yellow;
    			}	
    			#meDiv{
    				width:200px;
    				height:200px;
    				background-color:pink;
    			}	
    		</style>
    	</head>
    	<body>
    		<div id="grandpaDiv">
    			<div id="fatherDiv">
    				<div id="meDiv">
    				</div>
    			</div>
    		</div>
    		
    	</body>
    </html>
    <script type="text/javascript">
    
    //事件冒泡和捕获只有DOM2级支持。DOM0级和IE只支持事件冒泡。
    //1、事件冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；
    //             从具体的元素到不确定的元素。
    //2、事件捕获：
    //             从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。
    //             从不确定的元素到具体的元素；
    
    function $(id){
    	return document.getElementById(id);
    }
    
    window.onload = function(){
    //事件冒泡：DOM2级的事件绑定，把第三个参数写成false；
    /*
    	$("grandpaDiv").addEventListener("click",function(){
    		alert("爷爷被点了");
    	},false);
    	
    	$("fatherDiv").addEventListener("click",function(){
    		alert("爸爸被点了");
    	},false);
    	
    	$("meDiv").addEventListener("click",function(){
    		alert("我被点了");
    	},false);
    	
    	*/
    	
    //事件捕获：DOM2级的事件绑定，把第三个参数写成true；
    	
    	$("grandpaDiv").addEventListener("click",function(){
    		alert("爷爷被点了");
    	},true);
    	
    	$("fatherDiv").addEventListener("click",function(){
    		alert("爸爸被点了");
    	},true);
    	
    	$("meDiv").addEventListener("click",function(){
    		alert("我被点了");
    	},true);
    	
    }
    </script>

## 二、DOM事件流： ##

事件流：就是事件的流向，先捕获，再到事件源，最后再冒泡，一共分三个阶段：捕获阶段，事件源，冒泡阶段。

![70][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#grandpaDiv{
    				width:400px;
    				height:400px;
    				background-color:red;
    			}	
    			#fatherDiv{
    				width:300px;
    				height:300px;
    				background-color:yellow;
    			}	
    			#meDiv{
    				width:200px;
    				height:200px;
    				background-color:pink;
    			}	
    		</style>
    	</head>
    	<body>
    		<div id="grandpaDiv">
    			<div id="fatherDiv">
    				<div id="meDiv">
    				</div>
    			</div>
    		</div>
    		
    	</body>
    </html>
    <script type="text/javascript">
    
    //事件冒泡和捕获只有DOM2级支持。
    //事件流：就是事件的流向，先捕获，再到事件源，最后再冒泡
    //        即：一共分三个阶段：捕获阶段，事件源，冒泡阶段。
    
    function $(id){
    	return document.getElementById(id);
    }
    
    window.onload = function(){
    //事件冒泡：DOM2级的事件绑定，把第三个参数写成false；
    	$("grandpaDiv").addEventListener("click",function(){
    		alert("冒泡：爷爷被点了");
    	},false);
    	
    	$("fatherDiv").addEventListener("click",function(){
    		alert("冒泡：爸爸被点了");
    	},false);
    	
    	
    //事件捕获：DOM2级的事件绑定，把第三个参数写成true；
    
    	$("grandpaDiv").addEventListener("click",function(){
    		alert("捕获：爷爷被点了");
    	},true);
    	
    	$("fatherDiv").addEventListener("click",function(){
    		alert("捕获：爸爸被点了");
    	},true);
    	
    	
    	$("meDiv").addEventListener("click",function(){
    		alert("我被点了");
    	},false);
    
    
    }
    </script>

[70]: /images/20220517/e75d2a5274094de2b7327dad5c1fffba.png