JavaScript添加IE事件处理程序

Posted 2020-10-25 寻觅beyond

　　IE和其他主流的浏览器之间有很多的不兼容，有一些其他浏览器支持的方法在IE中并不能完美的支持，首先哪些支持呢？

　　　　1、直接在html代码的元素属性的位置为事件绑定处理程序；

　　　　2、使用javascript的 node.onclick=function(){}

　　IE8及之前的版本不支持addEventListener和removeEventListener，支持的是attachEvent()和detachEvent()

　　　　attachEvent()和detachEvent()都需要两个参数：

　　　　第一个参数是要绑定的事件（onclick、onmouseover.....注意和addEventListener不同)

　　　　第二个参数是要绑定的处理程序（匿名函数或者函数名，注意如果不是匿名函数，函数名不要加括号）

　　在使用addEventListener之前应该先检测当前浏览器是否支持该方法，可以将代码封装到一个对象中：

<button id="btn">按钮</button>	
<script>
	var eventUtil = {
		//type 传入 click mouseover，而不传onclick,mouseover
		addEvent : function(element, type, func){
			if (element.addEventListener) {    //所有主流浏览器，除了 IE 8 及更早 IE版本
			    element.addEventListener(type, func, false);
			} else if(element.attachEvent) {  // IE 8 及更早 IE 版本
			    element.attachEvent(‘on‘+type, func);
			} else {
				var type = "on"+type;
				//element.type = func; //wrong,不会成功
				element[type] = func;
			}
		},
		removeEvent : function(element, type, func){
			if (element.removeEventListener) {    //所有主流浏览器，除了 IE 8 及更早 IE版本
			    element.removeEventListener(type, func, false);
			} else if(element.detachEvent) {  // IE 8 及更早 IE 版本
			    element.detachEvent(‘on‘+type, func);
			} else {
				var type = "on"+type;
				//element.type = null; //wrong,不会成功
				element[type] = null;
			}
		}
	}

	var btn = document.getElementById("btn");
	function showOne(){ alert("one"); }
	eventUtil.addEvent(btn, "click", showOne);
	eventUtil.removeEvent(btn, "click", showOne);
</script>