» JS监听事件attachEvent和addEventListener Our Life

JS监听事件attachEvent和addEventListener

July 21, 2010 — panny

本文链接：http://www.ctanime.com/?p=744

有时候当某一对象的某一事件被触发时，它所要执行的程序可能是一大串，有可能是要呼叫某一函数，也有可能同时又要呼叫另一函数.这时候我们就需要JS的监听事件。

document.getElementById(“btn”).onclick = method1;

document.getElementById(“btn”).onclick = method2;

document.getElementById(“btn”).onclick = method3;

如果这样写,那么将会只有medhot3被执行

在IE中使用addachEvent

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

看看gmail的代码

var Ka=navigator.userAgent.toLowerCase();

var rt=Ka.indexOf(“opera”)!=-1;

var r=Ka.indexOf(“msie”)!=-1&&(document.all&&!rt);

function Zl(a,b,c){

if(r) {

a.attachEvent(“on”+b,c);

} else {

a.addEventListener(b,c,false);

}

看一个例子:

<p id=”para” title=”demo!”>点这里</p>
<script>
function test(){
alert(“test”);
}

function pig(){
alert(“pig”);
}

function addListener(element,e,fn){
     if(element.addEventListener){
          element.addEventListener(e,fn,false);
     } else {
          element.attachEvent(“on” + e,fn);
     }
}

window.onload = function(){
         var element = document.getElementById(“para”);
         addListener(element,”click”,test);
         addListener(element,”click”,pig);
}
</script>