共享window.onload事件------关于addLoadEvent()方法添加有参数的函数的一些思考

最新推荐文章于 2021-06-07 12:31:41 发布

dingzhui9421

最新推荐文章于 2021-06-07 12:31:41 发布

阅读量195

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/FireCamp/p/6659597.html

版权

本文深入探讨了JavaScript中window.onload事件的使用，特别是如何正确绑定多个函数，包括无参数和带参数的函数。提供了两种实现方法：直接绑定和使用addLoadEvent函数。分析了这些方法在函数调用顺序上的局限性。

摘要由CSDN通过智能技术生成

window.onload事件处理函数在页面加载完毕后调用。

问题是有时我们给window.onload事件处理函数绑定不止一个函数，并且有一些函数函数带有参数的。

下面是两个参数函数，其中一个有参数，另一个没有参数。

function function1() {
    if(!document.getElementById("placeHolder")) return false;//流控制语句if自动执行相应的Boolean转换（参见《JavaScript 高级程序设计》 P27）
    var placeHolder =  document.getElementById("placeHolder");
    var textNode = document.createTextNode("This is function1 which doesnot have options.")
    placeHolder.appendChild(textNode);
    var br = document.createElement("br");
    placeHolder.appendChild(br);
}
function function2(elementId) {
    if(!document.getElementById(elementId)) return false;
    var placeHolder =  document.getElementById(elementId);
    var textNode = document.createTextNode("This is function2 which has options.")
    placeHolder.appendChild(textNode);
    var br = document.createElement("br");
    placeHolder.appendChild(br);
}

一、以前的做法是直接绑定。

//一个函数时有没有（）都可以，为了和有参数的函数对应，最好都带有参数
window.onload = function1;
window.onload = function1();
window.onload = function2("placeHolder");
window.onload = function() {//添加多个函数时正确的用法
    function1();
    function2("placeHolder");
}
window.onload = function() {//这是错误的用法
    function1;
    function2;            
}

二、addLoadEvent()函数

绑定不带参数的版本：

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

这个函数是由Simon Willison编写的，只有一个参数：打算在页面加载后执行的函数的名字。

需要注意的有两点:

1、函数的名字，说明不能带有参数。

2、这个函数的名字相当于一个变量，这个变量的类型是“function”,所以这里的函数的名字不能用引号。

绑定带参数的版本：

function addLoadEventTest(func) {
    var ages = [].slice.call(arguments,1);
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = function() {
            func.apply(this,ages);
        }
    } else {
        window.onload = function() {
            oldonload.apply(this);
            func.apply(this,ages);
        }
    }
}