使用window.onload的最佳实践

Question

我开发Joomla网站/组件/模块和插件,我经常需要能够使用JavaScript在页面加载时触发事件.大多数情况下,这是使用该window.onload功能完成的.

我的问题是:

1. 这是在页面加载时触发JavaScript事件的最佳方式还是有更好/更新的方式？
2. 如果这是在页面加载时触发事件的唯一方法,那么确保不同脚本可以运行多个事件的最佳方法是什么？

Answer 1

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)事件,可以应用于文档对象,以了解何时可以操作文档(无需等待所有图像/样式表等..要加载).

对于跨浏览器的支持,有很多"hacky"实现,所以我强烈建议使用这个功能的框架.

Answer 2

现代javascript框架引入了"文档就绪"事件的想法.当文档准备好对其执行DOM操作时,将触发此事件.只有在页面上的所有内容都加载后,"onload"事件才会触发.

除了"文档就绪"事件之外,框架还提供了一种方法来排队多个Javascript代码和函数,以便在事件触发时运行.

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

如果您不反对框架,那么您将需要查看jQuery和document.ready,Prototype和dom:loaded,Dojo和addOnLoad或Google以用于[您的框架]和"文档就绪".

如果您还没有选择框架但感兴趣,那么jQuery是一个很好的起点.它不会改变Javascript的任何核心功能,并且通常会让您不受约束,让您随心所欲地执行操作.

Answer 3

window.onload事件在多个创建上被覆盖.要附加函数,请使用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);
}