原生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 (用setTimeout而非setInterval)
Dec 28 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
vue鼠标悬停事件实例详解
Apr 01 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 面向对象 PHP5 中的常量
2010/05/05 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
JS实现随机点名器
2020/04/12 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
import的本质解析
2017/10/30 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
教师考察材料范文
2014/06/03 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript