js中addEventListener、attachEvent、removeEventListener、detachEvent在IE以及FF不同的用法

最新推荐文章于 2018-09-12 13:30:44 发布

diaosui7664

最新推荐文章于 2018-09-12 13:30:44 发布

阅读量109

点赞数

原文链接：http://www.cnblogs.com/sidihu/archive/2012/05/06/2485466.html

版权

FireFox的addEventListener的用法。

addEventListener的参数一共有三个，语法为：

element.addEventListener(type,listener,useCapture)

原型：target.addEventListener(type, listener, useCapture);参数：target:监听对象;type：监听事件;listener：处理函

数;useCapture：监听顺序方式用途：监听某事件并执行相应操作。例如：window.addEventListener("load",loadwindow(),false);监听窗

口加载，当窗口加载时，执行loadWindow()函数。举例解释一下第三个参数：这个参数叫做useCapture，是一个布尔值，即true或者false，

决定监听顺序。比如监听对象1是层1，监听对象2是层2 ，层1包含层2，且都监听单击事件。当单击层2时，层1和层2都应该响应，响应顺序

就由useCapture决定了。当是true时，浏览器会使用Capture方式，先执行底层，即先处理层1，再处理层2.当是false的话是Bubbling方式，

先处理顶层，即先处理层2，再处理层1。

html代码

js代码

window.οnlοad=function(){
document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById

("btn_test").addEventListener("click",test2,false); }
function test1(){ alert("外层div触发") } function test2(){ alert("内层input触发")
}

自己体验一下，如果userCapture是true则test1先触发，如果userCapture是false则test2先触发。

这里贴一个例子，该例子来自互联网：

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行

写成这样：
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1

如果是Mozilla系列，并不支持该方法，需要用到addEventListener
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3

-------------------------my demo

//添加事件   
    //例子IORI.addEvent(window,'load',test6);   
    //    IORI.addEvent(window,'load',test5);   
    //可以为一个对象添加多个事件  
    function addEvent(node,type,listener){
        if(!IORI.isCompatible){return false;}
        if(!(node=$(node))) {return false;}
        
        if(node.addEventListener){
            //W3C的方法   
            node.addEventListener(type,listener,false);
            return true;
        }
        else if(node.attachEvent){
                //MS IE的方法 
                node.attachEvent('on'+type,listener)
                /*node['e'+type_]=listener;   
                node[type_]=function()   
                {                  
                    node['e'+type_](window.event);   
                }              
                node.attachEvent('on'+type_,node[type_]);  */
                return true;
        }
        
        //若两种方法都不具备   
        return false; 
    }
    IORI.addEvent = addEvent;
    
    //删除事件   
    //例子 IORI.removeEvent(window,'load',test6);  
    function removeEvent(node,type,listener){
        if(!(node=$(node))){
            return false;    
        }    
        
        if(node.removeEventListener){
             //W3C的方法 
            node.removeEventListener(type,listener,false);
            return true;
        }
        else if(node.detachEvent){
            node.detachEvent('on'+type,listener);
            return true;    
        }
        
        return false;
    }
    IORI.removeEvent = removeEvent;