同时使用n个window onload加载实例介绍

在JavaScript编程中，`window.onload` 是一个非常重要的事件，它表示浏览器已经完全加载了页面，包括所有的HTML元素、CSS样式、图片以及其他外部资源。在实际应用中，开发者经常需要在页面完全加载后执行某些操作，例如初始化JavaScript库、设置DOM元素的事件监听器等。然而，通常只有一个函数能被绑定到`window.onload`事件上，这意味着如果尝试多次绑定，后绑定的函数会覆盖先前的。但是，在某些场景下，我们可能需要同时执行多个`onload`事件处理函数，这时就需要采用一些技巧来实现。 这里介绍的是一种解决办法，通过自定义的`addEvent`函数来实现同时绑定多个`onload`事件处理函数。这个`addEvent`函数的工作原理如下： 1. `obj` 参数代表需要添加事件的对象，这里通常为`window`，因为我们要处理的是`window.onload`事件。 2. `type` 参数是事件类型，这里传入`"load"`，对应`onload`事件。 3. `fn` 参数是需要添加的事件处理函数。 `addEvent`函数首先检查`obj`对象上是否存在已有的`onload`事件处理函数（即`saved`）。如果存在，就将其保存下来，以便稍后执行。然后，将新的事件处理函数`fn`绑定到`obj`的`onload`属性上。这样做的结果是，当`onload`事件触发时，会先执行`saved`（原事件处理函数），接着执行`fn`（新添加的事件处理函数）。 在提供的代码示例中，我们连续调用了三次`addEvent`函数，分别绑定了三个不同的`onload`事件处理函数，它们会在页面加载完成后依次弹出对话框显示“我是尜尜1”、“我是尜尜2”和“我是尜尜3”。这种实现方式确保了每个函数都会被正确执行，而不会被其他函数覆盖。 需要注意的是，这种方法依赖于浏览器对`onload`事件的支持，以及在事件处理函数中正确保存和调用原有函数。在一些较老的浏览器或不支持事件监听的环境中，可能需要采用其他兼容性更好的解决方案，例如使用`attachEvent`（IE浏览器）和`addEventListener`（非IE浏览器）。 此外，现代JavaScript开发中，通常会推荐使用`addEventListener`方法来添加事件处理函数，因为它支持同时添加多个监听器，无需自定义`addEvent`这样的辅助函数。但在这个特定场景下，由于`window.onload`的特殊性，自定义函数是必要的。 `window.onload`是用于确保页面完全加载后执行特定操作的关键事件，通过自定义的`addEvent`函数，我们可以实现同时绑定和执行多个`onload`事件处理函数，从而满足在页面加载过程中执行多个初始化任务的需求。