JavaScript 动态绑定 window.onload、onresize 和 onscroll 事件的方法

window 特殊事件的绑定限制

window 对象的 onload、onresize 以及 onscroll 事件具有特殊性，它们无法像常规事件那样通过 attachEvent 或 addEventListener 方法进行绑定。

这意味着，针对 onload 事件（其他两个事件同理），必须采用特定的赋值方式进行处理。

 
window.onload = function() { // ... }
{ 
// ... 
}; 

避免覆盖的解决方案

然而，这种方法存在一个显著缺陷：如果尝试直接为 window.onload 重新赋值以添加新的事件处理程序，原有的赋值将会被覆盖，导致之前的逻辑失效。

 
var oldLoadHandler = window.onload;
window.onload = function() {
{ 
if (oldLoadHandler)
{ 
oldLoadHandler();
} 
newLoadHandler();
}; 

使用 ezj 简化处理

在 ezj 框架中，这一过程变得更加简便。

 
$(window).ready(onloadHandler1);
$(window).ready(onloadHandler2);

window.onload 与 document.body.onload 的区别

通常大家接触到的 onload 事件是 document.body.onload，但这实际上是受 IE 浏览器早期行为影响而产生的误解。正确的做法是使用 window.onload，该属性在 IE、Firefox 和 Chrome 等主流浏览器中均能正常工作。