window.onload绑定多个事件的两种解决方案

 更新时间:2016年05月15日 16:33:37   作者:鬼脸  
这篇文章主要介绍了window.onload绑定多个事件的两种解决方案的相关资料,需要的朋友可以参考下

前言

有些函数,必须在网页加载完毕后执行。比如:涉及DOM操作的。

网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可。

复制代码 代码如下:

window.onload = myFunction;

问题来了:如果需要同时绑定多个事件,该如何处理呢?有两种解决方法

方案一

创建一个匿名函数,来容纳需要绑定的多个事件,再讲这个匿名函数绑定到onload事件上

window.onload = function(){
firstFunction();
secondFunction();
...... 
}

方案二

由Simon Willsion编写的addLoadEvent函数:

function addEventLoad(func){
var oldOnload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldOnload();
func();
}
} 
}

将现有的window.onload事件处理函数的值存入变量oldOnload
如果这个处理函数上还没有绑定函数,则和那样把新函数绑定给它。
如果已经绑定了函数,则把新的函数追加到指令的末尾。

调用方法:

addEventLoad(firstFuction);

addEventLoad(secondFuction);

以上内容是小编通过两种方案给大家介绍的window.onload绑定多个事件的方法,希望对大家有所帮助!

相关文章

  • JS数组方法reduce的妙用分享

    JS数组方法reduce的妙用分享

    在 JavaScript 中,reduce 是最难理解的数组方法之一,它是一个强大而灵活的高阶函数,下面就来看看 reduce 的妙用之处,希望对大家有所帮助
    2023-02-02
  • 通过构造函数实例化对象的方法

    通过构造函数实例化对象的方法

    下面小编就为大家带来一篇通过构造函数实例化对象的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • js中函数的length是多少

    js中函数的length是多少

    本文主要介绍了js中函数的length是多少,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 简单了解TypeScript中如何继承 Error 类

    简单了解TypeScript中如何继承 Error 类

    这篇文章主要介绍了简单了解TypeScript中如何继承 Error 类,一个典型的网站服务器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我们希望这些类都拥有 Error 的特性:有错误消息、有调用栈、有方便打印的 toString 等。,需要的朋友可以参考下
    2019-06-06
  • 微信小程序如何访问公众号文章

    微信小程序如何访问公众号文章

    这篇文章主要介绍了微信小程序如何访问公众号文章,随着小程序不断的发展,现在个人的小程序也开放了很多功能了,个人小程序直接打开公众号链接。在群里看到的一款小程序,点击可以直接阅读文章了,需要的朋友可以参考下
    2019-07-07
  • 浅谈js闭包理解

    浅谈js闭包理解

    这篇文章主要介绍了对js闭包理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript中arguments.callee属性的作用与替换方案

    JavaScript中arguments.callee属性的作用与替换方案

    这篇文章介绍了JavaScript中arguments.callee属性的作用与替换方案,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 微信小程序全局文件的使用详解

    微信小程序全局文件的使用详解

    在小程序开发时,每个页面都对应一个目录,每个目录又分别有wxml、wxss、js和json四个文件。详细说明可查看后续文章介绍,本文主要详解全局文件
    2022-08-08
  • Add a Picture to a Microsoft Word Document

    Add a Picture to a Microsoft Word Document

    Add a Picture to a Microsoft Word Document...
    2007-06-06
  • Sourcemap源代码映射详细介绍

    Sourcemap源代码映射详细介绍

    这篇文章主要为大家介绍了Sourcemap源代码映射介绍及示例详解解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-04-04

最新评论