工作中经常为某个控件动态添加或删除事件,或者为某个控件注册多个事件监听,此时可以采用用attachEvent()/addEventListener()方法添加触发事件。这两个方法的区别在于前者只适用于IE浏览器,后者适用于Mozilla系列浏览器。
采用这种方式有几点好处:
1.可以为一个控件注册多个事件监听器。
2.某些事件不能通过直接赋值的方式设置,比如“onfocus”就不能直接设置,只能通过attachEvent()/addEventListener()这方法。
看下面的例子,我们为某个控件添加事件时一般直接赋值:
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
给出一个完整的例子: