原生js解决对象事件处理程序添加和删除的兼容性问题

       ie浏览器的存在对web前端开发的小伙伴们来说无疑是一个噩梦，为了解决ie的兼容性问题，大家可谓煞费苦心。在这里为大家提供一个用原生js解决对象事件处理程序添加和删除的兼容性问题的方法，希望有所帮助。

首先，创建一个对象：

var EventsUtility = {
	// 添加事件
	addEvent: function (element,type,callback) {  //element为添加事件的对象，type为事件类型，callback为事件函数
		if (typeof addEventListener !=='undefined') {
			element.addEventListener(type,callback,false);
		} else if (typeof attachEvent !=='undefined') {
			element.attachEvent('on'+type,callback);//IE,legacy browser
		}else {
			element['on'+type] = callback;
		}
	}
	// 删除事件
	removeEvent: function(element,type,callback){
		if (typeof removeEventListener !=='undefined') {
			element.removeEventListener(type,callback,false);
		} else if (typeof detachEvent !== 'undefined') {
			element.detachEvent('on'+type,callback);//IE,legacy browser
		} else {
			element['on'+type] = null;
		}
	}
}

然后，举个例子：

html代码：

<button type="button" id="btn">按钮</button>

js代码：

var ele = document.getElementById('btn');  //获取要添加事件的对象
function fn(){
    console.log('添加成功');
}
EventsUtility.addEvent(ele,'click',fn);  //添加click事件的处理函数
EventsUtility.removeEvent(ele,'click',fn); //删除click事件的处理函数