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+JSon 无刷新分页实现代码
Apr 01 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
详解vuex状态管理模式
Nov 01 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
js+canvas绘制图形验证码
Sep 21 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
destoon官方标签大全
2014/06/20 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python随机函数random()使用方法小结
2018/04/29 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
wxPython实现文本框基础组件
2019/11/18 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Python 多进程、多线程效率对比
2020/11/19 Python
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
秋天的雨教学反思
2014/04/27 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
小学生读书笔记
2015/07/01 职场文书
辞职申请书范本
2019/05/20 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
MyBatis 动态SQL全面详解
2021/10/05 MySQL
使用Redis做预定库存缓存功能
2022/04/02 Redis