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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
vue的keep-alive用法技巧
Aug 15 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存储过程
2007/02/14 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
php取出数组单个值的方法
2018/03/12 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
python用户管理系统的实例讲解
2017/12/23 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
Python表达式的优先级详解
2020/02/18 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
Final类有什么特点
2012/04/25 面试题
本科生详细的自我评价
2013/09/19 职场文书
应用电子技术专业个人求职信
2013/09/21 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
Vue如何清空对象
2022/03/03 Vue.js
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL