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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
jquery 模板的应用示例
Nov 12 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
实例分析javascript中的异步
Jun 02 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
cmd下运行php脚本
2008/11/25 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
Yii2如何批量添加数据
2016/05/17 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
js DOM模型操作
2009/12/28 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
安全教育感言
2014/03/04 职场文书
辞职信标准格式
2015/02/27 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
Redis基本数据类型List常用操作命令
2022/06/01 Redis