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 相关文章推荐
javascript中字符串拼接详解
Sep 26 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
Vue实现手机计算器
Aug 17 Javascript
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
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
用python找出那些被“标记”的照片
2017/04/20 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Python内置加密模块用法解析
2019/11/25 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
Python Map 函数的使用
2020/08/28 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
国际贸易专业推荐信
2013/11/15 职场文书
企业出纳岗位职责
2014/03/12 职场文书
会计求职自荐信范文
2015/03/04 职场文书
热血教师观后感
2015/06/10 职场文书
白银帝国观后感
2015/06/17 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers