与事件处理相关的function：addEventListener、removeEventListener与attachEvent、detachEvent

最新推荐文章于 2019-08-28 16:43:12 发布

原创最新推荐文章于 2019-08-28 16:43:12 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#addeventlistener #attachEven #事件处理 #JS

jQuery-js 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了addEventListener和attachEvent两种事件监听方法的区别与用法，并解释了如何使用removeEventListener和detachEvent来移除事件监听器。此外，还提供了一个兼容不同浏览器的事件添加函数。

addEventListener、removeEventListener与attachEvent、detachEvent，前者大部分主流浏览器都支持，为W3C标准，IE8以及更早版本不支持，后者支持IE浏览器

addEventListener向指定元素添加事件句柄，语法为：

ele.addEventListener(event,function,usecapture)

event：事件名称（不含on）比如“click”、“keydown”等
function：指定事件触发时执行的函数
usecapture：指定事件是否在捕获或者冒泡阶段执行（true：在捕获阶段执行；false：默认，在冒泡阶段执行）

document.getElementById("btnclick").addEventListener("click",function(){
///代码块
},false)

removeEventListener向指定元素移除由addEventListener方法添加的事件句柄，语法为：

ele.removeEventListener(event,function,usecapture)  
//其中移除时传入的参数与添加addEventListener时传入的参数相同，这也就是说通过addEventListener添加的匿名函数无法移除

下面的实例则不能够删除addEventListener

var btnclick = document.getElementById("btnclick");
btnclick.addEventListener("click",function(){
    /////代码块
},false);
btnclick.removeEventListener("click",function(){
    ////代码块
},false);

如果想要进行removeEventListener则先定义function：

function f1(){
    /////代码块
}
var btnclick = document.getElementById(“btnclick”);
btnclick.addEventListener("click",f1,false);
btnclick.removeEventListener("click",f1,false);

attachEvent作用与addEventListener一样，向指定元素添加事件句柄，语法为：

ele.attachEvent(event,function)

event：事件名称（含有on）比如“onclick”、“onkeydown”等
function：指定事件触发时执行的函数

document.getElementById("btnclick").attachEvent("onclick",function(){
///代码块
})

IE只支持事件冒泡，不存在事件捕捉

detachEvent作用与removeEventListener功能类似，不过是移除由attachEvent定义的事件，语法为：

ele.detachEvent(event,function)
    ////其中移除时传入的参数与添加attachEvent时传入的参数相同，这也就是说通过attachEvent添加的匿名函数无法移除,这点和removeEventListener一样

可以将addEvevtListener和attachEvent整合在一个函数中

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    } else if (elm.attachEvent) {
        var r = elm.attachEvent(‘on‘ + evType, fn);
        return r;
    } else {
        elm['on' + evType] = fn;//DOM 0
    }
}

下面这个是在别的网址上看到的：

var addEvent=(function(){
    if(document.addEventListener){
        return function(el,type,fn){
            if(el.length){
                        for(var i=0;i<el.length;i++){
                            addEvent(el[i],type,fn);
                        }
            } else {
                        el.addEventListener(type,fn,false);
               }
        };
    } else {
        return function(el,type,fn){
            if(el.length){
                        for(var i=0;i<el.length;i++){
                            addEvent(el[i],type,fn);
                        }
             }else{
                        el.attachEvent('on'+type,function(){
                            return fn.call(el,window.event);
                        });
                }
        };
        }
})();