js 非iedom2事件

客官°小女子只卖身不卖艺 2021-07-24 11:55 667阅读 0赞

非iedom2事件(ie9以上支持)
    	可绑定多个相同类型事件
    
    	**对象.addEventListener('去掉on的事件名',函数,布尔值(是否使用事件捕获，不写默认冒泡))**
    		
    		布尔值为true，将开启捕获事件，从上层元素到该元素执行,执行子元素时间时
    		上层元素有多个事件，捕获事件只对添加了true的事件有效，将优先
    		执行，未添加true的上层事件，会在子元素执行完自身事件后，向上冒泡执行
    	
    	**解绑**
    	
    		对象名.removeEventListener("去掉on的事件名",函数名不加括号)
    		
    			匿名函数无法进行事件解绑，添加的是非匿名函数才能解绑,非匿名函数不加括号
    				btn.onclick=function(){
    					div2.removeEventListener('click',t1)
    				}

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.div1{ 
    				height:400px;
    				width:400px;
    				background-color: red;
    				position:relative;
    			}
    			
    			.div2{ 
    				height:100px;
    				width:100px;
    				background-color: orange;
    				position: absolute;
    				left:100px;
    				top:100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			div1
    			<div class="div2">
    				div2
    			</div>
    		</div>
    		<button class="btn">解绑</button>
    		
    		<script>
    			var div1=document.querySelector(".div1");
    			var div2=document.querySelector(".div2");
    			
    /* div1.addEventListener("click",function(){ console.log("我是div1 dom22事件"); },true); div1.addEventListener("click",function(){ console.log("我是div1 dom2事件"); });*/
    		
    			div2.addEventListener("click",t1);
    			var btn=document.querySelector(".btn");
    			
    			btn.onclick=function(){ 
    				div2.removeEventListener('click',t1)
    			}
    			
    			function t1(){ 
    				console.log("有名字");
    			}
    			
    		</script>
    	</body>
    </html>