`

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

分享到:
评论

相关推荐

    火狐浏览器不支持window.event的解决办法

    火狐浏览器不支持window.event的解决办法,解决不同浏览器针对window.event的差异

    10个至强JavaScript代码

    if (window.addEventListener) this.oc.addEventListener('DOMMouseScroll', function(e) { this.parent.scroll(-e.detail); }, false); else this.oc.onmousewheel = function () { this.parent....

    详解addEventListener的三个参数之useCapture

    addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 “click”);第二个参数表示要接收事件处理的函数;第三个参数为 useCapture,本文就讲解它。 代码如下: ”outDiv”>  ”middleDiv”>  ”...

    document.addEventListener使用介绍

    主要介绍了document.addEventListener,下面有个示例,大家可以参考下

    解决vue 给window添加和移除resize事件遇到的坑

    在vue项目中需要监听window窗口变化来时时计算图片的高度,于是就加了一个监听事件;确实监听到了,但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态,即移除监听事件并没有生效。 //之前...

    事件高级用法及兼容写法

    注意:一定要保证移除事件时和添加事件时是同一个事件函数 事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener, 在低版本IE中可以使用: attachEvent(事件名,事件函数) 绑定...

    各种浏览器兼容问题

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]在IE、Opera均正常有效,唯独FF既不执行,也不报错,因为在FF,document.body.onload是undefined(未定义),把一个函数赋值给undefined既不会发生什么事情,也不算...

    addEventListener和attachEvent二者绑定的执行函数中的this不相同

    最近在写一个事件代理的时候,遇到一个BUG,发现除此外,二者绑定的执行函数中的 this 是不相同的,addEventListener 和 attachEvent函数在运行时候的上下文是不相同的。 用了一个简单的demo来描述这个不同点: ...

    JS中动态添加事件(绑定事件)的代码

    两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 代码如下: var t = document.getElementById(“tab1”); t.onclick = function tst(){ alert(”); } 第二种...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

     1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,...

    基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

    //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件。 //页面关闭时,先onbeforeunload事件,再onunload事件。 //对于火狐: //页面刷新时,只执行onunload;...

    addeventlistener监听scroll跟touch(实例讲解)

    这三个事件只在手机上生效 touchstart:手指开始触屏 touchmove:手指移动 touchend:手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture...

    可设置时间的广告.rar

    部分代码如下: Author:sohighthesky ... *Date:2009-11-9 */ /* *box 指定要显示消息框或者其id ... if(window.addEventListener)window.addEventListener(e,call,false); else window.attachEvent("on"+e,call); },

    DOM元素高亮Highlighter.js.zip

    Highlighter.js 是一个小型(纯 javascript)的库,可以让你轻松导航、选择以及高亮 DOM 元素。用法:document.addEventListener("DOMContentLoaded", function() {  var Highlighter = new window....

    javascript 鼠标滚轮事件

    // different events between Firefox and IE window.addEventListener ? obj.addEventListener(“DOMMouseScroll”, this.wheel, false) : (obj.onmousewheel = this.wheel); } wheelEvent.prototype.wheel = ...

    js禁止浏览器的回退事件

    直接来个终极方案: 查找了好多资料才找到的,这种方式,可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。 [removed] //防止页面后退 history.pushState(null, null, document.URL); window....

    【JavaScript源代码】vue浏览器返回监听的具体步骤.docx

    vue浏览器返回监听的具体步骤 ... 需要监听浏览器的回退按钮,并阻止其默认事件。 具体步骤如下: 1、挂载完成后,判断浏览器... window.addEventListener('popstate', this.goBack, false); } }, 2、页面销毁时

Global site tag (gtag.js) - Google Analytics