window.addEventListener来解决让一个js事件执行多个函数

可能你也碰到过这种情况,就是在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

赞 (0)

相关推荐

  • addEventListener()与removeEventListener()解析

    addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值. 最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序: 如果是false(false- 默认),表示在冒泡阶段调用事件处理程序. addEventListener的参数一共有三个,语法为: element.addEventListener(type,liste

  • 事件绑定之小测试 onclick && addEventListener

    事件绑定之小测试 onclick && addEventListener

    开发工具中应该有相应的功能,于是测试之: 前提:只是一个简单的小测试,而且 addEventListener 属于标准绑定函数,IE 中与此不兼容(IE 相应的是 attachEvent),所以此次测试先抛弃 IE,使用 Firefox 5.0.1, Chrome 14.0, Opera 11.50 测试页面: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Test</title> <sty

  • document.addEventListener使用介绍

    document.addEventListener("事件名称", 函数, false); 复制代码 代码如下: function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序: 如果为true事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick 如果为false事件的顺序为 标签的onclick事件 ---- document.onclick

  • JS在IE和FF下attachEvent,addEventListener学习笔记

    对象名.addEventListener("事件名(不带ON)",函数名,true/false);(FF下) 对象名.attachEvent("事件名",函数名);(IE下) 说明: 事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on". 函数名,记住不要跟括号最后一个参数是个布尔值,表示该事件的

  • addEventListener()第三个参数useCapture (Boolean)详细解析

    举例 <div id="div1">  <div id="div2">    <div id="div3">      <div id="div4">      </div>    </div>  </div></div> 如果在 d3 上点击鼠标,事件流是这样的: 捕获阶段 在 div1 处检测是否有 useCapture 为 t

  • Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene

  • addEventListener 的用法示例介绍

    (要注意的是div必须放到js前面才行) 一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效,比如: 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("btn").onclick = method3; 那么将只有

  • javascript attachEvent和addEventListener使用方法

    attachEvent方法 按钮onclick addEventListener方法 按钮click 两者使用的原理:可对执行的优先级不一样,下面实例讲解如下: attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: Java代码 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElem

  • 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别

    第一件事情. this 指钟是JavaScript语言中的一个特殊指钟,他在代码运行时,指向调用this语句的当前对象. 如果是事件绑定函数,则指向被绑定的元素本身. <script type="text/javascript"> //by Go_Rush(阿舜) from  http://ashun.cnblogs.com/ alert(this===window)  //true  直 接调用的时候,指向window本身 var gorush={     f:funct

  • 详解addEventListener的三个参数之useCapture

    addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture,本文就讲解它. 复制代码 代码如下: <div id="outDiv">   <div id="middleDiv">     <div id="inDiv">请在此点击鼠标.</div>   </d

随机推荐