`

js window.onload 加载多个函数和追加函数

 
阅读更多

js window.onload 加载多个函数和追加函数

平时做项目 经常需要使用window.onload,

用法如下:

function func(){alert("this is window onload event!");return;} 

window.onload=func;

或者如下:

window.onload=function(){alert("this is window onload event!");return;}

但window.onload 不能同时加载多个函数。

比如:
function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ;
后面会把前面的覆盖,上面代码只会输出 b。

此时可用如下方法解决:

window.onload =function() { t();  b(); }

另一种解决方法如下:

 

复制代码
代码
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--> function addLoadEvent(func) {
  
var oldonload = window.onload;//得到上一个onload事件的函数
  if (typeof window.onload != 'function') {//判断类型是否为'function',注意typeof返回的是字符串
    window.onload = func;
  } 
else {  
    window.onload 
= function() {
      oldonload();
//调用之前覆盖的onload事件的函数---->由于我对js了解不多,这里我暂时理解为通过覆盖onload事件的函数来实现加载多个函数
      func();//调用当前事件函数
    }
  }
}

//(完整示例)使用如下:

function t(){
alert(
"t")
}
function b(){
alert(
"b")
}
function c(){
alert(
"c")
}
 
function addLoadEvent(func) {
  
var oldonload = window.onload;
  
if (typeof window.onload != 'function') {
    window.onload 
= func;
  } 
else {  
    window.onload 
= function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于  window.onload =function() { t();  b(); c() ;}
复制代码

 

 

 

个人以为直接使用隐式函数(如:window.onload =function() { t();  b(); c() ;})更快捷,当然使用 addLoadEvent 更professional,各取所好吧!

 

JS window.onload追加函数:

 

 

代码
复制代码
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><script>
if(window.attachEvent)//IE:如果浏览器中存在window.attachEvent函数则使用window.attachEvent函数,判断是否是IE还可以使用:if (document.all){//..}
window.attachEvent("onload",function() {alert("add method");});
else  //FireFox
window.addEventListener("load",function() {alert("add method");},true);
</script>
复制代码

 

 

 

运行,js中alert弹出消息,问题解决。

============相关资料================

attachEvent   将指定函数绑定到事件,以便每当该事件在对象上触发时都调用该函数。

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

最后感谢vForm表单验证程序的作者-雷晓宝

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/chenlei65368/archive/2009/09/12/4544823.aspx

分享到:
评论

相关推荐

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

    例如,如果我们有多个需要在页面加载后运行的函数`function1`、`function2`和`function3`,直接使用`window.onload`只会让最后一个注册的函数`function3`被执行。 为了解决这个问题,我们可以使用`window....

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

    但在早期的JavaScript使用中,window.onload只能为页面加载事件绑定一个函数。一旦有新的函数需要绑定,原有的函数就会被覆盖。这给开发者带来了很多不便。 为了解决这个问题,我们可以采用两种主要的方法来加载多...

    [removed]追加函数使用示例

    这种追加函数的方法在实际开发中非常实用,尤其在需要添加多个页面加载后执行的脚本时,可以避免对原有`onload`事件处理函数的影响,保证所有必要的操作都能被执行。同时,这也是一种符合开放封闭原则的设计,使得...

    原生javascript如何实现共享onload事件

    该函数会检查window.onload是否已经绑定过函数,如果没有,则直接绑定新函数,否则,把新函数追加到现有的onload事件处理函数的末尾。 SimonWillison提出的addLoadEvent函数的代码如下: ```javascript function ...

    jQuery练习题.docx

    2. 编写个数:JavaScript 中 window.onload 不能同时编写多个,而 jQuery 中的 ready() 能够同时编写多个。 3. 简化写法:jQuery 中的 ready() 可以简写为 $()。 五、 jQuery 实现用户登录框的拖拽功能 1. CSS ...

    让浏览器DOM元素最后加载的js方法

    实际上,window.onload 事件处理器不仅可以绑定一个函数,还可以绑定多个函数,或者在原有函数的基础上追加新的函数,这提供了更大的灵活性。例如: ```javascript window.onload = function() { // 执行已有的...

    107个常用javascript语句

    68.JS中分为两种窗体输出:模態和非模態.window.showModaldialog(),window.showModeless() 69.状態栏文字的设置:window.status='文字',默认的状態栏文字设置:window.defaultStatus = '文字.'; 70.添加到收藏夹:...

    JavaScript笔记第一章—课程准备.pdf

    另一种方法是使用`window.onload`事件,这个事件会在页面的所有资源(包括图片、CSS文件等)加载完毕后执行,这样可以确保在执行JavaScript代码之前页面结构已经完整。 在学习和开发JavaScript时,不可避免地会遇到...

    用一下[removed].rar

    这个函数在页面加载的不同阶段使用时,会产生显著不同的效果。本篇文章将深入探讨`document.write`的工作原理,以及它在页面装载前和装载后的应用场景。 1. `document.write`基本使用 `document.write`接收一个...

    关于延迟加载JavaScript

    在现代网页中,JavaScript被广泛用于各种动态效果和交互,但同时它也可能成为影响页面加载速度的主要因素之一。由于JavaScript的执行会阻塞浏览器的渲染进程,若页面中有大量的JavaScript代码,尤其是在页面头部引入...

    精通javascript

    • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章(\第14章) • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert&#40;&#41;方法与confirm()方法的使用 ...

    jquery.docx

    `$(document).ready()`比`window.onload`更早执行,因为它不等待图片等资源加载完成。 总结,jQuery通过简洁的API和强大的功能,极大地提高了JavaScript的开发效率。无论是简单的DOM操作,复杂的动画效果,还是Ajax...

    js在 tr 后面追加 tr,删除当前tr,提交校验tr的所有name值

    以上代码示例都需要在DOM加载完成后执行,可以绑定到`window.onload`或者使用`DOMContentLoaded`事件。结合`addEdit.jsp`文件,这可能是用于编辑或添加表格数据的页面,上述方法可以帮助你实现动态交互的功能。记住...

    jQuery个人总结

    这比原生 JavaScript 的 `window.onload` 函数更为灵活,因为后者会在整个页面包括图片等资源加载完毕后才触发,可能导致页面响应较慢。 - **区别**:`window.onload` 只能被调用一次,如果多次绑定将只有最后一次...

    jquery中文手册

    - 使用`$(document).ready(fn)`替代`window.onload`,因为`$(document).ready()`在DOM加载完成后即执行,比等待所有资源加载完成的`window.onload`更快。 - 避免使用全局变量,减少冲突和提高性能。 - 尽量使用`$...

    精通JavaScript

    1.本书附源代码共计381个,其运行环境如下: IE 5或更高版本 Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看...

    iframe中子父类窗口调用JS的方法及注意事项

    在使用iframe进行Web开发时,经常会遇到需要在父窗口和嵌入的子iframe页面间相互调用JavaScript函数的场景。本文将详细介绍如何在iframe中实现子窗口与父窗口间的JavaScript方法调用以及在操作过程中需要注意的事项...

    我的JQuery笔记.doc

    包裹代码,确保DOM加载完毕后再执行内部的代码,这相当于JavaScript中的window.onload事件。 二、jQuery选择器 jQuery提供了丰富的选择器用于选取DOM元素,包括层次选择器: 1. ID选择器:$("#id"),选取具有特定ID...

Global site tag (gtag.js) - Google Analytics