zoukankan      html  css  js  c++  java
  • 把多个JavaScript函数绑定到onload事件处理函数上的技巧

    一,onload事件发生条件

      用户进入页面且页面所有元素都加载完毕。如果在页面的初始位置添加一个JavaScript函数,由于文档没有加载完毕,DOM不完整,可能导致函数执行错误或者达不到我们想要的效果。

    二,绑定多个函数到onload事件上

    1,先展示一个错误的做法

    1 window.onload = firstFunction;
    2 window.onload = secondFunction;

    实际执行过程中,只有最后一个函数被执行,因为每个事件处理函数只能绑定一条指令。

    2,使用一个匿名函数

    1 window.onload = function()
    2 {
    3     firstFunction();
    4     secondFunction();
    5 }

    3,一个通用的解决方案

      函数名称为addLoadEvent,它由Simon Willision编写,参数为页面执行完毕时需要执行的函数名字。

     1 function addLoadEvent(func)
     2 {
     3     var oldonload = window.onload;
     4     if(typeof window.onload != 'function')
     5     {
     6         window.onload = func;
     7     }
     8     else
     9     {
    10         window.onload = function()
    11         {
    12             oldonload();
    13             func();
    14         }
    15     }
    16 }

    如果window.onload没有进行任何赋值操作,window.onload返回的是一个object,进行赋值之后,返回function。  

    这个函数的优点在于无论有多少个需要执行的函数,我只需加上一条语句就可以搞定,而无须修改以前的代码。

    1     addLoadFunction(firstFunction);
    2     addLoadFunction(secondFunction);
  • 相关阅读:
    https://developer.aliyun.com/ebook?utm_content=g_1000256420
    形容词在句子中的位置
    顺风水水
    https://www.youtube.com/watch?v=pVIywLXDuRo 有趣到流泪
    经济机器是怎样运行的 (时长30分钟) Ray Dalio
    https://codepen.io/deadzq-the-decoder/pen/qBqQYXg
    Vue 10 test
    vue day2
    codepen学Vue day2
    代理总结更新
  • 原文地址:https://www.cnblogs.com/yxl10/p/4180078.html
Copyright © 2011-2022 走看看