之前的文章的案例中 为DOM元素添加事件，出现两种方式。今天再说下第三种方式，也能为元素添加事件。

事件监听器

addEventListener

可以添加多个事件。存在兼容问题，支持 IE9 以上

实例：

 <button>事件监听dom2级</button>

var btn = document.querySelector('button');
btn.addEventListener('click',function () {alert('哈哈')
});function fn2() {alert('2222222')
};
btn.addEventListener('click',fn2);

移除监听事件：removeEventListener

btn.removeEventListener('click',fn2)

那么IE 6、7、8 怎么变呢，他们也有监听器

btn.attachEvent('onclick',function(){函数体
});//移除事件监听器
btn.detachEvent('事件名',函数名)

解决监听事件兼容性  实例：

function jt(){alert('监听事件的兼容问题')
}function addEventListener(ele,eventName,fn){if (ele.addEventListener) {ele.addEventListener(eventName,fn);}else if (ele.attachEvent) {ele.attachEvent('on' + eventName,fn);}else{ele['on' + eventName] = fn;}
}addEventListener(btn,'mouseover',jt)

下面是移除监听器的实例：

function removeEventListener(ele,eventName,fn){if (ele.removeEventListener) {ele.removeEventListener(eventName,fn);}else if (ele.detachEvent) {ele.detachEvent('on' + eventName,fn);}else{ele['on' + eventName] = fn;}
}removeEventListener(btn,'mouseover',jt)

补充：

开头提到的两种事件的用法

方法 1：

    element.οnclick= function(){//事件处理函数}

方法 2：
向html元素分配事件属性 ，调用函数来执行事件
比如向button元素 分配一个点击事件的属性，如下：    

<button class="btn01"  οnclick="funClick()"> </button>function funClick(){//事件处理函数}