js dom2兼容浏览器写法

谁借莪１个温暖的怀抱￠ 2021-07-24 23:33 452阅读 0赞

dom2兼容事件(ie和非ie浏览器)
    
    	**绑定**
    	
    		对象名.addEventListener   会根据不同浏览器返回正负性值
    		对象名.attachEvent		   会根据不同浏览器返回正负性值
    		固可根据if判断返回的正负性，来兼容不同浏览器，或使用都兼容的dom0事件
    	
    	**解绑**
    	
    		对象名.removeEventListener  会根据不同浏览器返回正负性值
    		对象名.detachEvent		       会根据不同浏览器返回正负性值
    		固可根据if判断返回的正负性，来兼容不同浏览器，或使用都兼容的dom0事件

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div class="div1" id="div1">
    			11111
    		</div>
    		<button id="btn">解绑</button>
    		<script>
    			
    			var div1=document.getElementById("div1");
    			var btn=document.getElementById("btn");
    			function test()
    			{ 
    				console.log("tet");
    			}
    			
    			function addEvent(ele,type,methodName)
    			{ 
    				if(ele.addEventListener){ 
    					ele.addEventListener(type,methodName);
    				}else if(ele.attachEvent)
    				{ 
    					ele.attachEvent("on"+type,methodName);
    				}else{ 
    					ele["on"+type]=null;
    				}
    			}
    			
    			function removeEvent(ele,type,methodName)
    			{ 
    				if(ele.removeEventListener){ 
    					ele.removeEventListener(type,methodName);
    				}else if(ele.detachEvent){ 
    					ele.detachEvent("on"+type,methodName);
    				}else{ 
    					ele["on"+type]="";
    				}
    			}
    			
    			addEvent(div1,"click",test);
    			btn.onclick=function(){ 
    				removeEvent(div1,"click",test);
    			}
    		</script>
    	</body>
    </html>