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

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

时间: 2024-10-31 00:29:18

window.addEventListener来解决让一个js事件执行多个函数的相关文章

关于js事件执行顺序

关于js事件执行顺序小技巧 js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button type="button" onclick="console.log('111')"></button> 结果如下: 此方法不建议使用,有两方面的原因, 1)此方法绑定的方法必须为一个全局的方法,而通常我们需要绑定的方法都是针对

js事件绑定--支持匿名函数解除绑定

废话不多说,直接上代码 var handlers = {}, bind = (function (){ if(window.addEventListener){ return function (el, type, callback, capture){ el.addEventListener(type, function (){ callback(); handlers[type] = handlers[type] || []; handlers[type].push(arguments.ca

JS事件之自建函数bind()与兼容性问题解决

JavaScript事件绑定常用方法 对象.事件 = 函数; 它只能同时为一个对象的一个事件绑定一个响应函数 不能绑定多个,如果有多个,后面的会覆盖前面的 addEventListener() 此方法也可以为元素绑定响应函数 参数: 事件的字符串(不带on) 回调函数,事件触发时执行 是否在捕获阶段触发事件,一般都传false 使用此方法可以为一个元素的同一事件绑定多个响应函数 当事件触发时,按绑定顺序依次执行 attachEvent() IE8及以下浏览器不支持addEventListener

js事件执行顺序

一个JS正则的字符串替换函数

直接上函数吧  不废话 function replacestring(oldstr,newstr,text) { var exp = new RegExp(oldstr,'g'); var c=text.replace(exp,newstr); return c; } var oldstr='world'; var newstr='cccc'; var text='Hello world, Hello world'; var aa= replacestring(oldstr,newstr,tex

js事件小记

参考javascript编程全解  javascript高级程序设计 对事件的处理方式称为事件处理程序或事件侦听器 ,对于一个元素或事件,只能设定1个事件处理程序,却可以同时设定多个事件监听器 1)设定为HTML元素的属性 <!DOCTYPE html> <meta charset="UTF-8" /> <head></head> <body> <a href="http://www.baidu.com&quo

关于js预编译以及js文件执行顺序的几个问题。

关于js的执行原理,除去html页面中直接添加的代码,js代码的放置可以分为两类. //情形a           <script type="text/javascript" src="xxx.js"$amp;>amp;$lt;/script>           //情形b            <script type="text/javascript">           code......       

一次关于js事件出发机制反常的解决记录

起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的,本地测试没有问题,但是在安卓打包的内嵌h5页面就出现了问题.简单化的代码先展示出来. html代码如下 <div id="father" class="ss1">s1 <div id="children" class="s

vue 中监听窗口发生变化,触发监听事件, window.onresize &amp;&amp; window.addEventListener(&#39;resize&#39;,fn) ,window.onresize无效的处理方式

1 // 开始这样写,不执行 2 window.onresize = function() { 3 console.log('窗口发生变化') 4 } 5 6 7 // 改成window监听事件 8 window.addEventListener('resize', function() { 9 console.log('窗口发生变化') 10 }) onresize的定义方式 一.直接在html中定义 如<body onresize="doResize()"/> 二.直接