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 offset函数应用实例
Nov 14 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
全面理解闭包机制
2016/07/11 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
js实现全选和全不选
2020/07/28 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python opencv实现图像边缘检测
2019/04/29 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python如何实现强制数据类型转换
2019/11/22 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
办公室驾驶员岗位职责
2013/11/15 职场文书
中国梦的演讲稿
2014/01/08 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python