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 相关文章推荐
js获得网页背景色和字体色的方法
Mar 21 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
vue css 相对路径导入问题级踩坑记录
Jun 05 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图片等比例缩放
2015/07/28 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
浅谈javascript的调试
2015/01/28 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
JavaScript判断IE版本型号
2015/07/27 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
详解python中的index函数用法
2019/08/06 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
党员创先争优公开承诺书
2014/03/28 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
品质口号大全
2014/06/17 职场文书
课外科技活动总结
2014/08/27 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL