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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
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 Smarty 字符比较代码
2011/02/27 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php实现微信模板消息推送
2018/03/30 PHP
javascript的函数
2007/01/31 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
layui实现三级联动效果
2019/07/26 Javascript
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
Python pymongo模块用法示例
2018/03/31 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python 实现图片批量压缩的示例
2020/12/18 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
年终总结会议主持词
2014/03/17 职场文书
领导参观欢迎词
2015/01/26 职场文书
礼貌问候语大全
2015/11/10 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python