window.addEventListener使一个js事件执行多个函数的方法

发布时间:2020-07-10编辑:脚本学堂
情景:在js的代码中用了window.onload后,可能会影响到body中的onload事件。可以全写在body中,也可以全放到window.onload中,但这样不是很方便,有时需要两个同时用到。这时就要用window.attachEvent和window.addEventListener来解决了。

情景:在js的代码中用了window.onload后,可能会影响到body中的onload事件。可以全写在body中,也可以全放到window.onload中,但这样不是很方便,有时需要两个同时用到。这时就要用window.attachEvent和window.addEventListener来解决了。

这里提供一个解决方法。至于attachEvent和addEventListener的用法,大家自行搜索吧。
 

复制代码 代码如下:
if (document.all){
window.attachEvent('onload',函数名)//IE中
}
else{
window.addEventListener('load',函数名,false);//firefox
}

这里顺便说一下attachEvent方法,该方法可以为某一事件附加其它的处理事件,有时可能比较有用。

其语法可以查看《DHTML手册》,里面有详细的说明,这里贴一个例子:
 

复制代码 代码如下:
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。