我开发 Joomla 网站/组件/module和插件，而且我经常需要使用 JavaScript 在页面加载时触发事件的能力。大多数情况下，这是使用该window.onload函数完成的。
我的问题是：
- 这是在页面加载时触发 JavaScript 事件的最佳方式还是有更好/更新的方式？
- 如果这是在页面加载时触发事件的唯一方法，那么确保多个事件可以由不同脚本运行的最佳方法是什么？
使用 window.onload 的最佳实践
IT技术
javascript
joomla
joomla1.5
onload
2021-01-22 15:11:11
6个回答
window.onload = function(){};有效，但您可能已经注意到，它只允许您指定 1 个 listener。
我会说更好/更新的方法是使用框架，或者只是使用本机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”实现，因此我强烈建议为此功能使用框架。
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);
}
现代 javascript 框架引入了“文档就绪”事件的想法。这是一个事件，当文档准备好对其执行 DOM 操作时将触发。“onload”事件仅在页面上的所有内容都加载后触发。
除了“文档就绪”事件外，框架还提供了一种方法，可以在事件触发时将多位 Javascript 代码和函数排队运行。
所以，如果你反对框架，最好的方法是实现你自己的 document.onload 队列。
如果您不反对框架，那么您将需要研究jQuery 和 document.ready、Prototype 和 dom:loaded、Dojo 和 addOnLoad或 Google [您的框架] 和“文档就绪”。
如果您还没有选择框架但有兴趣，那么 jQuery 是一个不错的起点。它不会改变任何 Javascript 的核心功能，并且通常不会妨碍您，让您在需要时随心所欲地做事。
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
就个人而言，我更喜欢这种方法。它不仅允许您拥有多个onload功能，而且如果某些脚本在您使用它之前已经定义了它，则此方法足以处理该问题......剩下的唯一问题是如果页面加载了几个不使用的脚本的window.addLoad()功能; 但那是他们的问题:)。
PS 如果您以后想“链接”更多功能，它也很棒。