`

window.onload事件--attachEvent和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
 
分享到:
评论

相关推荐

    IE11没有window.attachEvent方法处理方法

    window.attachEvent('onload', function() { console.log('页面加载完成'); }); } ``` #### 4. 结论 通过以上方法,我们可以有效地解决IE11不支持`attachEvent`的问题。在实际开发中,建议尽可能采用现代浏览器...

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

    这时就要用window.attachEvent和window.addEventListener来解决一下。 下面是一个解决方法。至于attachEvent和addEventListener的用法,可以自己Google或百度一下。 代码如下: if (document.all){ window....

    attachEvent和addEventListener 使用方法

    在IE中,可以使用 `attachEvent` 添加 `window.onload` 事件,而在其他浏览器中则使用 `addEventListener`: ```javascript var script = document.createElement('script'); script.textContent = 'console.log(...

    javascript 处理事件绑定的一些兼容写法

    这个版本同样考虑了`addEventListener`和`attachEvent`: ```javascript var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, ...

    各种浏览器兼容问题

    关于用脚本设置onload事件句柄 ... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]关于用脚本绑定事件句柄 IE 下用 attachEvent, FF 下用 addEventListener相关讨论如下:http://search.blueidea.com/?q=addE

    js onload处理html页面加载之后的事件

    使用`addEventListener`或`attachEvent`可以避免覆盖之前的onload事件处理程序,使得多个脚本模块能够各自添加它们自己的事件处理程序,而不必担心冲突。 另外,需要注意的是,如果在页面中有`<body>`标签里设置了`...

    页面中body onload 和 [removed] 冲突的问题的解决

    这时,`body.onload` 和 `window.onload` 事件就显得尤为重要。然而,当这两个事件同时存在时,可能会出现冲突,导致代码执行顺序混乱或只执行其中一个事件。本文将详细探讨这个问题,并提供解决方案。 `body....

    JavaScript判断页面加载完之后再执行预定函数的技巧

    通过分离内容和行为,使用`addEventListener`或`attachEvent`为元素绑定事件处理,以及通过`window.onload`事件确保在所有资源加载完毕后再执行重要代码,可以极大地提高代码的可维护性和用户体验。在实际开发中,还...

    js [removed] 加载多个函数和追加函数详解

    在JavaScript开发过程中,页面加载完成的事件——window.onload——是一个非常重要的事件。通常在页面加载完毕后我们需要执行一些初始化的代码,比如设置样式、初始化DOM元素的值、绑定事件等。但在早期的JavaScript...

    一些常用且实用的原生JavaScript函数.docx

    这些原生JavaScript函数和技巧在实际开发中非常实用,它们提供了更高效、更简洁的方式来操作DOM、处理事件和样式,从而优化代码质量和性能。通过熟练掌握这些知识点,开发者可以更好地应对各种前端挑战。

    最常用的10个javascript自定义函数(english)

    这个函数可以确保在页面加载完成后执行的事件处理器不会覆盖已有的 `onload` 事件处理器,而是将其合并在一起执行。 #### 3. getElementsByClass() - **功能概述**:`getElementsByClass()` 是一个用于根据类名...

    在chrome中[removed]事件的一些问题

    为了编写更健壮的跨浏览器代码,开发者可能还需要考虑使用`addEventListener`或`attachEvent`(对于旧版IE)来添加事件监听器,这些方法提供了更灵活的事件处理机制,可以避免因事件绑定方式引发的问题。 总结来说...

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

    在本文中,我们将深入探讨`this`指针的用法以及IE的`attachEvent`与Firefox的`addEventListener`在事件处理上的差异。 首先,让我们来理解`this`的用法。在JavaScript中,`this`通常指向调用函数的那个对象。例如,...

    JavaScript中OnLoad几种使用方法

    了解和掌握onload事件的不同使用方法对于前端开发者来说是必须的。以下是基于给定文件信息详细说明的关于JavaScript中onload事件的几种使用方法的知识点。 1. 在body标签内直接使用onload属性 onload事件可以通过在...

    js页面事件大全.pdf

    - JavaScript事件处理函数可以是内联的(如`onClick`),也可以是通过`addEventListener`或`attachEvent`(IE)动态添加。这些函数接收事件对象作为参数,可以访问事件的相关信息。 此外,JavaScript页面事件还...

    IFRAME自适合高度详解

    这种方法利用`window.onload`事件来调整`<iframe>`的高度。具体实现如下: ```javascript window.onload = function () { frames["index2"].location.href = "/dgiframe.htm"; }; ``` 此段代码会在页面加载完成后...

    同时使用n个window onload加载实例介绍

    在一些较老的浏览器或不支持事件监听的环境中,可能需要采用其他兼容性更好的解决方案,例如使用`attachEvent`(IE浏览器)和`addEventListener`(非IE浏览器)。 此外,现代JavaScript开发中,通常会推荐使用`...

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

    本文将探讨在 Internet Explorer (IE) 和 Firefox (FF) 浏览器中处理事件的方法,特别关注 `attachEvent` 和 `addEventListener` 的使用。 #### 二、事件处理概述 在 JavaScript 中,事件是指由用户或浏览器引发的...

    iframe自适应高度说明文档

    window.attachEvent('onload', dyniframeSize); } else { window.onload = dyniframeSize; } ``` 这段代码首先定义了一个`iframeids`数组,存储了所有需要调整高度的`iframe`的ID。然后,通过循环遍历这个数组,...

Global site tag (gtag.js) - Google Analytics