原生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 相关文章推荐
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
js转义字符介绍
Nov 05 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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来实现网络服务
2009/09/15 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
大学生先进事迹材料
2014/02/16 职场文书
植树节标语
2014/06/27 职场文书
车辆转让协议书
2014/09/24 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
小学体育组工作总结
2015/08/13 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
课改心得体会范文
2016/01/25 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书