Javascript 使用window.onload的最佳实践

我开发Joomla网站/组件/模块和插件，并且经常需要能够使用JavaScript在页面加载时触发事件。大多数情况下，这是使用

窗口.onload

功能完成的

我的问题是：

这是在页面加载时触发JavaScript事件的最佳方法还是有更好/更新的方法

如果这是触发页面加载事件的唯一方法，那么确保多个事件可以由不同脚本运行的最佳方法是什么

---

window.onload=function（）{}可以工作，但正如您可能已经注意到的，只允许您指定一个侦听器

我认为更好/更新的方法是使用框架，或者只是使用本机
addEventListener
和
attachEvent
（对于IE）方法的简单实现，这也允许您删除事件的侦听器

下面是一个跨浏览器实现：

// Cross-browser implementation of element.addEventListener()
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// Use: listen("event name", elem, func);

对于window.onload用例，使用：
listen（“load”，window，function（）{}）


编辑我想通过添加别人指出的宝贵信息来扩展我的答案

这是关于
DOMContentLoaded（Mozilla、Opera和webkit nightlies目前支持此功能）和
onreadystatechange（对于IE）事件的，这些事件可应用于文档对象，以了解文档何时可被操作（无需等待加载所有图像/样式表等）

有很多跨浏览器支持此功能的“黑客”实现，因此我强烈建议使用框架来实现此功能。
现代javascript框架引入了“文档就绪”事件的概念。当文档准备好对其执行DOM操作时，将触发此事件。“onload”事件仅在加载页面上的所有内容后激发

除了“documentready”事件之外，这些框架还提供了一种方法，可以将多个Javascript代码和函数排队，以便在事件触发时运行

因此，如果您反对框架，最好的方法是实现您自己的document.onload队列

如果你不反对框架，那么你会想研究一下，或者在谷歌上搜索[你的框架]和“文档准备就绪”

如果你还没有选择一个框架，但对它感兴趣，jQuery是一个很好的起点。它不会改变Javascript的任何核心功能，通常不会妨碍你，让你想做什么就做什么。
我个人更喜欢。它不仅允许你有多个
onload
函数，b但是，如果某个脚本在您使用它之前定义了它，那么这个方法足以处理这个问题……剩下的唯一问题是，如果一个页面加载了几个脚本，而这些脚本没有使用
window.addLoad（）
函数；但这就是它们的问题：）

另外，如果您想在以后“链接”更多函数，这也很好。
Joomla随MooTools提供，因此您会发现使用MooTools库获取附加代码是最简单的。MooTools附带一个名为domready的自定义事件，该事件在加载页面和解析文档树时触发

window.addEvent( domready, function() { code to execute on load here } );

可以找到有关MooTools的更多信息。Joomla 1.5目前随MT1.1发布，而Joomla 1.6 alpha将包括MT1.2。窗口。加载事件在多个创建上被覆盖。要附加函数，请使用
window.addEventListener（W3C标准）或window.attachEvent（用于IE）。使用以下有效的代码

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}

这是肮脏但较短的方法：p

function load(){
   *code*
}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]
( addEventListener ? 'load' : 'onload', function(){} )

由于我总是在文档底部包含jQuery/bootstrap JS文件，并且无法访问文档上方的
$
，因此我开发了一个小小的“init”插件，这是我在页面顶部包含的唯一JS脚本：

window.init = new function() {
    var list = [];

    this.push = function(callback) {
        if (typeof window.jQuery !== "undefined") {
            callback();
        } else {
            list.push(callback);
        }
    };

    this.run = function() {

        if (typeof window.jQuery !== "undefined") {
            for(var i in list) {
                try {
                    list[i]();
                } catch (ex) {
                    console.error(ex);
                }
            }
            list = [];
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", this.run, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", this.run);
    } else {
        if (window.onload && window.onload !== this.run) {
            this.push(window.onload);
        }
        window.onload = this.run;
    }
};

使用此功能，我可以在jQuery和引导包含之前定义页面上的任何匿名加载程序，并确保一旦jQuery出现，它就会启动：

init.push(function() {

    $('[name="date"]').datepicker({
        endDate: '0d',
        format: 'yyyy-mm-dd',
        autoclose: true
    }).on('hide', function() {
        // $.ajax
    });

    $('[name="keyword_id"]').select2();
});

我想大力推广jQuery的
.ready（）
函数：+1用于“仅1个侦听器”，这正是我现在需要的提示！我喜欢这条警告信息：对onload队列实现的很好的参考，或者更多地解释文档就绪和onload事件之间的不同？我不想卷入内容纠纷，但像jQuery这样的库实际上不是框架。我可以看到这两个方面，但是web开发人员使用jQuery的方式更像是一个框架，不管项目如何自我描述。对于我来说，这似乎是一个观点、观点和答案作者的问题——特别是因为我指的是更广泛的javascript世界和document.ready技术。没有恶意或争论。当然，堆栈溢出可以让你写下任何你想要的答案，除此之外，答案听起来还可以。然而，事情的定义是明确的，这部分答案客观上是错误的。事实上，正如答案所描述的，“它不会改变Javascript的任何核心功能，通常不会妨碍您，让您在需要时随心所欲”正是它是一个库而不是一个框架的原因。jQuery和类似的DOM操作库不执行控制反转，它们只提供编写代码的实用程序。没有好莱坞的方法：）这个答案在当时是有效的，但在较新版本的Joomla中使用了JQuery。