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

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代码

<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技术基地" /> </div>

js代码

window.onload=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;