如何设置更多的 window.onload 事件

How is it possible to set more window.onload events?

本文关键字：window onload 事件 何设置 设置      更新时间：2023-09-26

我有三个函数，我想在加载页面时调用它们。我试过这个：

window.onload = [function f1(){...}, function f2(){...}, function f3(){...}];

不幸的是，这不起作用。我不知道我应该如何管理它。

不能设置多个事件处理程序，它不受支持。 如果你需要执行多个函数，那么只需依次调用它们：

function f1() { ... }
function f2() { ... }
function f3() { ... }
window.onload = function() {
    f1();
    f2();
    f3();
}

大多数 JavaScript 库都为您提供了向事件处理程序添加多个函数调用的方法 - 并将为您执行链接。 例如，使用 jQuery，您可以执行以下操作：

$(window).load(function() { ... });
$(window).load(function() { ... });
$(window).load(function() { ... });

这不会用新的调用覆盖以前的调用，但会将所有三个调用设置为从onload事件调用。

更新：处理它的另一种方法是在window对象上使用addEventListener。

function f1() { ... }
function f2() { ... }
function f3() { ... }
window.addEventListener("load", f1);
window.addEventListener("load", f2);
window.addEventListener("load", f3);

甚至

window.addEventListener("load", function() { ... });
window.addEventListener("load", function() { ... });
window.addEventListener("load", function() { ... });

这两个代码片段等效于第一个 - 并且彼此。

在混淆代码类别下，这里有一个可以考虑为大脑锻炼的选项：

window.onload = function() {
  return this.forEach(Function.prototype.call, Function.prototype.call);
}.bind([function f1(){...}, function f2(){...}, function f3(){...}]);

它将适用于实现 Array.forEach() 和 Function.prototype.bind() .

只需将所有函数包装在一个匿名函数中

window.onload = function(){
  f1();
  f2();
  f3();
}

您可以在从一个函数调用函数之前定义函数：

window.onload = function () {
    f1();
    f2();
    f3();
}

使用 addEventListener()，您可以为 onload 定义多个侦听器。侦听器按定义顺序执行。

使用函数动态添加它们：

function addWindowOnload(next) {
    var prev = window.onload; 
    window.onload = function() {
        if (prev) prev();
        next();
    };
}
相关文章：