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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
Javascript 面向对象 继承
May 13 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
在webstorm中配置less的方法详解
Sep 25 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 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
如何通过Python实现标签云算法
2019/07/02 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
Python无损压缩图片的示例代码
2020/08/06 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
JNI的定义
2012/11/25 面试题
转预备党员政审材料
2014/02/06 职场文书
机关保密承诺书
2014/06/03 职场文书
个人违纪检讨书
2014/09/15 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
Oracle锁表解决方法的详细记录
2022/06/05 Oracle