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 focus和blur事件的应用详解
Jan 26 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
javascript数组详解
Oct 22 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 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常量的详解
2013/06/09 PHP
php动态生成函数示例
2014/03/21 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
Web开发之JavaScript
2012/03/29 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python对文件的操作方法汇总
2020/02/28 Python
python实现猜拳游戏
2020/03/04 Python
Django权限设置及验证方式
2020/05/13 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
2014年项目经理工作总结
2014/11/24 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL