JavaScrip中的事件的冒泡和捕获，事件绑定，事件的移除

你的名字 2022-02-15 03:07 183阅读 0赞

**一.事件的冒泡和事件的捕获**  
1.事件流描述的是从页面中接受事件的顺序。 事件流包括事件的冒泡和事件的捕获

事件的捕获：父级元素先触发，子集元素后触发。
    事件的冒泡：子集元素先触发，父级元素后触发。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			#father{
    				width: 200px;
    				height: 200px;
    				background: deepskyblue;
    				border: 1px solid deepskyblue;
    			}
    			#son{
    				width: 100px;
    				height: 100px;
    				background: deeppink;
    				margin: 50px auto;
    			}
    		</style>
    		<script type="text/javascript">				
    			window.onload=function(){
    				var Father=document.getElementById('father');
    				//Father.innerHTML='第一个div是父元素';
    				var Son=document.getElementById('son');
    				//Son.innerHTML='第二个div是子元素';
    				var arr=[Son,Father,document,document.body];
    				for(var i=0;arr.length;i++){
    				//传统方式绑定事件的  事件的传播的方式就是冒泡排列
    					/*arr[i].onclick=function(){
    						console.log(this);  //子元素先触发，父元素后触发
    					}
    				}*/
    				//第三个参数flase表示的事件的冒泡
    					/*arr[i].addEventListener('click',function(){
    						console.log(this);
    					},false);*/
    				//第三个参数true表示的事件的捕获
    					arr[i].addEventListener('click',function(){
    						console.log(this);
    					},true);
    				}
    				
    			}
    		</script>
    	</head>
    	<body>
    		<div id="father">
    			<div id="son"></div>
    		</div>		
    	</body>
    </html>

**2.事件的绑定**  
语法：element.addEventListener(event,function, useCapture);  
第一个参数是事件的类型：（如’click’或者‘mousedown’）  
第二个参数是事件触发后调用的函数  
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

**3.事件的移除**