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 相关文章推荐
jQuery实现动画效果的实例代码
May 07 Javascript
js select option对象小结
Dec 20 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
vue的for循环使用方法
Feb 12 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
python3.0 字典key排序
2008/12/24 Python
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
文明倡议书范文
2014/04/15 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
通讯稿范文
2015/07/22 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技