`
royzhou1985
  • 浏览: 253450 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript执行window.onload和body onload多个处理过程的方法

阅读更多
JavaScript执行window.onload和body onload多个处理过程的方法
以前写 JavaScript 脚本时,事件都是采用
object.event = handler;
的方式初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera 来说很通用。但是有一个问题就是,这种方式只能一个事件对应一个事件处理过程。如果希望一个事件可以依次执行多个处理过程就不好用了。

但是 Internet Explorer 从 5.0 开始提供了一个 attachEvent 方法,使用这个方法,就可以给一个事件指派多个处理过程了。attachEvent 对于目前的 Opera 也适用。但是问题是 Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener 方法,这个方法跟 attachEvent 差不多,也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别,在 attachEvent 方法中,事件是以 “on” 开头的,而在 addEventListener 中,事件没有开头的 “on”,另外 addEventListener 还有第三个参数,一般这个参数指定为 false 就可以了。




因此要想在你的程序中给一个事件指派多个处理过程的话,只要首先判断一下浏览器,然后根据不同的浏览器,选择使用 attachEvent 还是 addEventListener 就可以了。实例如下:

Java代码
if (document.all) {  
window.attachEvent('onload', handler1);  
window.attachEvent('onload', handler2);  
}  
else {  
window.addEventListener('load', handler1, false);  
window.addEventListener('load', handler2, false);  


if (document.all) {
window.attachEvent('onload', handler1);
window.attachEvent('onload', handler2);
}
else {
window.addEventListener('load', handler1, false);
window.addEventListener('load', handler2, false);
}


注意:attachEvent 所指派的多个过程的执行顺序是随机的,所以这几个过程之间不要有顺序依赖。另外 attachEvent 和 addEventListener 不仅仅适用于 window 对象,其他的一些对象也支持该方法。

另外为了方便我也写了个function sunet_addEvent(obj, evType, fn),如下:


Java代码
function sunet_addEvent(obj, evType, fn)  
{  
if (obj.addEventListener){  
obj.addEventListener(evType, fn, false);  
return true;  
}else if (obj.attachEvent){  
var r = obj.attachEvent("on"+evType, fn);  
return r;  
}else{  
return false;  
}  


function sunet_addEvent(obj, evType, fn)
{
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}else{
return false;
}
}
// 调用例子:Java代码
sunet_addEvent(window,"locad",init); 
分享到:
评论

相关推荐

    ie中 body onload 和 window onload 解决法案

    在网页开发中,`body.onload` 和 `window.onload` 是两个常见的JavaScript事件处理函数,用于在页面完全加载后执行特定的代码。它们都是用来确保在执行任何操作之前,页面的所有资源(包括HTML、CSS、JavaScript、...

    JavaScript中Window.open参数

    在某些场景下,可能需要同时打开多个窗口,只需要在一个函数中多次调用 `window.open` 方法即可。例如: ```javascript <script LANGUAGE="JavaScript"> <!-- function openwin() { window.open("page.html", ...

    window.open打开新窗口,不被拦截的方法

    <body onload="window.parent.opener=null;window.close();"> </body> ``` 这段代码的作用是在页面加载完成后立即关闭当前窗口。需要注意的是,这种方式可能也会受到浏览器的弹出窗口拦截机制的影响。为了确保兼容...

    window.open全攻略

    在JavaScript中,`window.open()` 是一个非常重要的方法,它用于打开一个新的浏览器窗口或者重载已有的窗口。以下是对这个方法的详细介绍: ### 1. 基本用法 最简单的`window.open()` 使用方式如下: ```...

    JavaScript中window.open用法实例详解

    JavaScript中的`window.open()`函数是用于在浏览器中打开新窗口或者新标签的API,它可以用于创建一个新的浏览器窗口或者替换已存在的窗口。这个函数通常在网页交互中用来打开新的链接、弹出对话框或者进行页面间的...

    window.open参数详解.txt

    在Web开发中,`window.open()`是一个非常实用的JavaScript函数,用于在新的浏览器窗口或标签页中打开一个指定的URL。它不仅能够打开新窗口,还可以控制新窗口的属性,如大小、位置以及是否显示工具栏、菜单栏等。...

    window.open()参数

    window.open() 是一个常用的 JavaScript 函数,它可以打开一个新的浏览器窗口,以供用户访问其他网页或显示信息。在本文中,我们将详细介绍 window.open() 函数的参数大全,并提供一些实用的代码示例。 基本语法 ...

    jQuery(document).ready(function($) { });的几种表示方法

    2. 使用`$(window).load()`,我们可以像这样添加多个事件处理程序,每个处理程序都会在页面完全加载后执行: ```javascript $(window).load(function() { alert("hello,我是 jQuery!"); }); $(window).load...

    window.open的参数详细应用

    在网页开发过程中,`window.open` 方法被广泛应用于打开新的浏览器窗口或标签页。此方法对于实现弹出窗口、预览功能等具有重要作用。下面将详细探讨 `window.open` 方法的各项参数及其应用场景。 #### 基本语法 ```...

    网页中JS函数自动执行常用三种方法_.docx

    这种方法可以在页面加载完成后执行多个函数。 JQ 方法 如果我们使用 jQuery 库,那么可以使用 `$(document).ready()` 事件来自动执行 JS 函数。例如: ```javascript $(document).ready(function() { $("table tr...

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

    综上所述,解决 `body.onload` 和 `window.onload` 冲突的关键在于正确地合并事件处理函数,确保每个函数都能按预期执行。同时,理解不同事件的触发时机和浏览器兼容性问题也是编写健壮的JavaScript代码所必需的。

    Jqyery中同等与js中windows.onload的应用

    在JavaScript中,`window.onload` 是一个非常关键的事件,用于确保在页面所有资源(包括图像、脚本、样式表等)完全加载之后再执行指定的函数或代码块。这通常用于那些依赖于页面元素存在的操作,因为这些操作需要...

    Jquery 在页面加载后执行的几种方式

    需要注意的是,jQuery的`$(document).ready()`方法可以多次使用,而且它和原生的`window.onload`并不冲突。如果两者都使用,则`window.onload`会在`$(document).ready()`之后执行。`window.onload`通常用于在页面...

    JavaScript_BOM.txt

    浏览器对象模型(Browser Object Model,简称 BOM)是 JavaScript 中一个重要的概念,它提供了与浏览器窗口交互的方法和属性。通过 BOM,开发者可以控制浏览器窗口的行为,如改变窗口大小、位置,甚至创建新的窗口等...

    JavaScript中OnLoad几种使用方法

    4. 处理多个onload事件 JavaScript允许多个事件处理程序注册到同一个事件上。对于onload事件,我们可以注册多个函数,这些函数会按照注册的顺序依次执行。例如: ```html <body onload="aa();bb();cc();"></body> ``...

    javaScript的对象window

    在JavaScript代码中,我们可以直接调用`window`对象的许多属性和方法,而不必显式地写出`window`前缀。例如,通常我们使用的`document.write()`实际上就是`window.document.write()`的简写形式。然而,对于某些特定...

    js中window.open()的所有参数详细解析.docx

    window.open() 是 JavaScript 中的一个函数,用于打开新的浏览器窗口或标签页。在实际开发中,我们经常需要对新打开的窗口进行自定义设置,如设置窗口的尺寸、位置、工具栏、菜单栏等。本文将详细介绍 window.open()...

    jQuery中的read和JavaScript中的onload函数的区别

    特别地,当涉及页面加载完毕时的事件处理函数时,我们必须区分jQuery中的$(document).ready()与JavaScript原生的window.onload()方法。 首先,JavaScript的window.onload事件处理函数是一个传统的JavaScript事件,...

    JQuery-- onload,ready方法详细解说

    在 JavaScript 库中,JQuery 提供了两种事件处理机制,即 onload 和 ready。它们都是在页面加载完成后触发的事件,但是它们之间有着一定的区别。 首先,我们需要了解这两种事件的触发时机。在页面加载完成后,会...

Global site tag (gtag.js) - Google Analytics