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

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);
        }
    }
}

 PS: 上面的代码是我百度的，初入前端js，以后再来填坑。

函数是能解决加载有参数的函数的问题，但是我发现，这个函数还是有问题的，无法解决多个函数调用顺序问题。。。。。。。原来的函数也有这个问题。