事件监听器的兼容性写法

事件监听器的兼容性写法

1. addEventListener不兼容IE8以下的浏览器，所以有了attachEvent的兼容性写法，二者兼容性写法如下：

<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//事件监听的兼容写法
EventListener = {
	addEvent : function(ele,fn,str){
		if(ele.addEventListener){
			ele.addEventListener(str,fn);
		}else if(ele.attachEvent){
			//兼容IE6、7、8
			ele.attachEvent("on"+str,fn);
		}else{
			ele["on"+str] = fn;
		}
	}
}
EventListener.addEvent(btn,fn1,"click");
EventListener.addEvent(btn,fn2,"click");

function fn1(){
	console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
	console.log("不能报国平天下，枉为男儿大丈夫。");
}
</script>

2. 既然绑定监听事件有兼容性写法，那么解绑监听事件也需要一个兼容性写法。

<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//事件监听的兼容写法
EventListener = {
	addEvent : function(ele,fn,str){
		if(ele.addEventListener){
			ele.addEventListener(str,fn);
		}else if(ele.attachEvent){
			//兼容IE6、7、8
			ele.attachEvent("on"+str,fn);
		}else{
			ele["on"+str] = fn;
		}
	},
	removeEvent : function(ele,fn,str){
		if(ele.removeEventListener){
			ele.removeEventListener(str,fn);
		}else if(ele.detachEvent){
			ele.detachEvent("on"+str,fn);
		}else{
			ele["on"+str] = null;
		}
	}
}
EventListener.addEvent(btn,fn,"click");
EventListener.removeEvent(btn,fn,"click");

function fn(){
	console.log("九尺龙泉万卷书，上天生我意何如。");
}
</script>