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的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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
终于听上了直流胆调频
2021/03/02 无线电
smtp邮件发送一例
2006/10/09 PHP
php 页面执行时间计算代码
2008/12/04 PHP
PHP学习之数组值的操作
2011/04/17 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
js 对象使用的小技巧实例分析
2019/11/08 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
django框架如何集成celery进行开发
2017/05/24 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python转换字典成为对象,可以用"."方式访问对象属性实例
2020/05/11 Python
python如何实现图片压缩
2020/09/11 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
高考自主招生自荐信
2013/10/20 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
团组织关系介绍信
2014/01/12 职场文书
社区七一党员活动方案
2014/01/25 职场文书
五四青年节演讲稿
2014/05/26 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server