原生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 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
javascript 面向对象编程 function也是类
Sep 17 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
Vue组件开发初探
Feb 14 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 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
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP 验证登陆类分享
2015/03/13 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
python的类变量和成员变量用法实例教程
2014/08/25 Python
使用python加密自己的密码
2015/08/04 Python
Python callable()函数用法实例分析
2018/03/17 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
python如何实现视频转代码视频
2019/06/17 Python
python全栈知识点总结
2019/07/01 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
Python sys模块常用方法解析
2020/02/20 Python
如何用python 操作zookeeper
2020/12/28 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
2014年转正工作总结
2014/11/08 职场文书
青春雷锋观后感
2015/06/10 职场文书
金榜题名主持词
2015/07/02 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL