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


Posted in Javascript onJuly 03, 2020

在工作时,我们给一个元素绑定了事件,如果dom还没加载完成,就执行了js代码,就不会绑定成功。常规解决方案就是用:

window.onload = EventFunction;

可是如果有两个 事件,

  • window.onload = EventFunction1;
  • window.onload = EventFunction2;

那2就会将1取代,这时你可能会想:每个事件处理板书只能绑定一条指令。有一种办法可以让我们避开这一难题:可以先创建一个匿名函数来容纳这两个函数,然后把那个匿名函数绑定到onload事件上,如下所示:

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

它确实能很好地工作————在需要绑定的函数不是很多的场合,这应该是最简单的解决方案了。

这里还有一个弹性最佳的解决方案——不管你打算页面加载完毕时执行多少个函数,它都可以应付自如。这个方案需要额外编写一些代码,把函数绑定到window.onload事件就非常易行了。

这个函数的名字是addLoadEvent,它是由Simon Willison写的。它只有一个参数:打算在页面加载完毕时执行的函数的名字。

下面是此函数要完成的操作:

1.把现有的 window.onload 事件处理函数的值存入变量 oldonload;

2.如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它;

3.如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾。

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

这将把那些在页面加载完毕时执行的函数创建为一个队列。如果想把刚才那两个函数添加到队列里去,只需要写出以下代码就行了:

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

我发现这个函数非常实用,尤其是在代码变得越来越复杂的时候。无论打算在页面加载完毕时执行多少个函数,只要定一条语句就可以安排好一切。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
javascript中的this作用域详解
Jul 15 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
Vue如何实现监听组件原生事件
Jul 03 #Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 #Javascript
JavaScrip如果基于url实现图片下载
Jul 03 #Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 #Javascript
JavaScript如何判断对象有某属性
Jul 03 #Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 #Javascript
JS常见错误(Error)及处理方案详解
Jul 02 #Javascript
You might like
推荐文章系统(一)
2006/10/09 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jQuery制作图片旋转效果
2017/02/02 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
基于python实现百度翻译功能
2019/05/09 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
作风建设年活动总结
2014/08/27 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
管辖权异议上诉状
2015/05/23 职场文书
离职信范文
2015/06/23 职场文书