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


Posted in Javascript onDecember 26, 2012

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

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

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
Javascript 相关文章推荐
js删除所有的cookie的代码
Nov 25 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
js选项卡的制作方法
Jan 23 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 #Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 #Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 #Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 #Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 #Javascript
window.open以post方式将内容提交到新窗口
Dec 26 #Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 #Javascript
You might like
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
JavaScript包装对象使用介绍
2013/08/29 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
django Admin文档生成器使用详解
2019/07/22 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
企业员工集体活动方案
2014/08/17 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
关于工作经历的证明书
2014/10/11 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
文明家庭事迹材料
2014/12/20 职场文书
先进工作者申报材料
2014/12/23 职场文书
销售业务员岗位职责
2015/02/13 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL