window.addEventListener来解决让一个js事件执行多个函数

window.addEventListener来解决让一个js事件执行多个函数_javascript技巧

php中文网

发布： 2016-05-16 17:45:18

原创

1580人浏览过

可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件。你可以全写在body中，也可以全放到window.onload中，但是这样并不是很方便，有时我们需要两个同时用到。这时就要用window.attachEvent和window.addEventListener来解决一下。

下面是一个解决方法。至于attachEvent和addEventListener的用法，可以自己Google或百度一下。

乐尚团购

乐尚团购系统，是一项基于PHP+MYSQL为核心开发的一套免费 + 开源专业团购系统。软件具执行效率高、模板自由切换、后台管理功能方便等诸多优秀特点。本软件是基于Web应用的B/S架构的团购网站建设解决方案的建站系统。它可以让用户高效、快速、低成本的构建个性化、专业化、强大功能的团购网站。从技术层面来看，本程序采用目前软件开发IT业界较为流行的PHP和MYSQL数据库开发技术，基于面向对象的编程，

查看详情

复制代码代码如下:

 
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