了解JavaScript中监听事件addEventListener()与attachEvent()

今天我弄了一下JS事件，主要说一下addEventListener与attachEvent在FF和IE兼容的问题

在js的事件绑定方法中，ie只支持attachEvent，而FF和Chrome只支持addEventListener，所以就必须为这两个方法做兼容处理，原理是先判断attachEvent只否为真（存在），如果为真则用attachEvent方法，否则的话就用addEventListener 。

首先呢，我们来看一下addEventListener() 
语法：target.addEventListener(type, listener, useCapture);

target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。

 

例如：

document.getElementById("testText").addEventListener("click", function () { 
    console.log("按钮被点击了");
}, false); 

举例：

document.getElementsByTagName("button")[0].addEventListener("click",function(){
    console.log("按钮被点击了");
},false);

 

下面重点介绍一下addEventListener的第3个参数(useCapture)。 userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,下面来看一个例子吧！

 

html代码：

<div id="d1"><button id="btn"></button></div>

JS代码

document.getElementById("d1").addEventListener("click",function(){
    console.log("外层div先触发");
},false);
document.getElementById("btn").addEventListener("click",function(){
    console.log("内层按钮先触发");
},false);

注意：如果userCapture是true则外层先触发，如果userCapture是false则内层先触发。如果外层为true，内层为false，则外层先触发。

下面来说一下，attachEvent() 。

语法：target.attachEvent(type, listener); 

target：文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。

例如：

document.getElementById("btn").attachEvent("onclick",function(){
    console.log("按钮被点击了");
});

上面大家可以看到运用事件绑定的时候，事件的区别 一个是用onclick 一个是用到click,所以FF与chrome中的事件是不带on,而IE是必须带on的，下面我们来封装函数，解决兼容性问题。

function addEvent(obj,ev,fn){
    if(typeof obj.addEventListener !== "undefined"){
        obj.addEventListener(ev,fn,false);
    }else{
        obj.attachEvent("on"+ev,fn);
    }
}

在这里 obj指的是需要监听的对象，ev指的是监听的事件（记得不能带 on 喔），fn指的是触发的函数

运用示例：

var oBtn = document.getElementsByTagName_r("button")[0];
addEvent(oBtn,"click",function(){
    console.log("按钮被点击了");
});

最后，我们既然添加监听成功了，那我们怎么删除它呢？其实很简单在这里我就不详细的说了，相信看到这里很多小伙伴们都看累了吧，OK 直接上代码

function removeEvent(obj,ev,fn){
    if(typeof obj.addEventListener != "undefined"){
        obj.removeEventListener(ev , fn ,false);
    }else{
        obj.detachEvent('on'+ev , fn);
    }
}  

第一次写博客，想了很久，不知道结语该说些什么。那我就在此先谢谢大家的观看吧！希望本文的内容可以帮助一些小伙伴节约开发时间和成本，如果真的有所帮助，别忘了在评论里点个赞哦！