window.addEventListener来解决让一个js事件执行多个函数
更新时间：2012年12月26日 11:35:31 作者：
可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件。这时就要用window.attachEvent和window.addEventListener来解决一下,需要的朋友可以参考下
可能你也碰到过这种情况,就是在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
下面是一个解决方法。至于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
您可能感兴趣的文章:
相关文章
Opacity.js...2007-01-01
JS组件系列之Bootstrap table表格组件神器【终结篇】
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。本文给大家介绍JS组件系列之Bootstrap table表格组件神器【终结篇】，一起学习吧2016-05-05
JavaScript,作为前端开发的重要语言,可以实现许多复杂的功能,在这篇文章中,我们将一起创建一个交互式的音乐播放器,快跟随小编一起学习一下吧2024-01-01
这篇文章主要介绍了使用js判断TextBox控件值改变然后出发事件。需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要为大家详细介绍了Bootstrap模态框插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了详解微信小程序轨迹回放实现及遇到的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
webpack+vue-cil中proxyTable处理跨域的方法
这篇文章主要介绍了webpack+vue-cil中proxyTable处理跨域的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
bootstrap datepicker插件默认英文修改为中文
这篇文章主要为大家详细介绍了bootstrap datepicker插件默认英文修改为中文的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
js中获取URL参数的共用方法getRequest()方法实例详解
本文通过实例代码给大家介绍了js中获取URL参数的共用方法getRequest()方法 ,文末给大家提到了js获取url参数值的两种方式，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
这篇文章主要推荐了10 款 SVG 动画的 JavaScript 库，非常的实用，效果也非常棒，有需要的朋友可以参考下。2015-03-03
最新评论