在多个脚本文件中有多个window.onload函数

Question

我正在构建一个站点，我有很多脚本，它们都包含在不同的文件中，其中一些是onload函数。我知道使用一个函数来运行它们。但是，对于多个文件，这不能很好地工作。我尝试过使用onload.js文件：

window.onload = function() {
    // Site wide funcs
    searchShow();
    // Page specific
    if(getProducts && loadMore){
        getProducts();
        loadMore();
    }
    if(checkBox){
        checkBox();
    }
    if(styleProduct) {
        styleProduct();
    }

}

在运行之前应检查页面上是否存在该功能。 （某些文件在每个文件中引用，有些文件是站点范围的，并在头文件中引用） 有人建议有更好的选择来拥有所有这些onload文件吗？

Answer 1

在您的脚本文件中坚持addEventListener或attachEvent，因为它们都允许单个事件的多个处理程序。

修改

由于这两个函数是特定于浏览器的，因此从某种包装器开始是个好主意：

function createEvent(objectTarget, eventName, eventHandler)
{
    if (objectTarget.addEventListener)
        objectTarget.addEventListener(eventName,eventHandler,false);
    else if (objectTarget.attachEvent)
        objectTarget.attachEvent('on'+eventName,genericHandler);
}

现在使用createEvent将新处理程序附加到特定事件。

createEvent(window, 'load', handler1);
createEvent(window, 'load', handler2);
...

请注意，浏览器之间的事件模型存在更严重的差异（例如event对象或target与srcElement的位置。）