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

Question

I have three functions, which I would like to call, when the page is loaded. I tried this:

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

Unfortunately this doesn't work. I have no idea how should I manage it.

Answer 1

複数のイベント ハンドラーを設定することはできません。サポートされていません。複数の関数を実行する必要がある場合は、それらを次々と順番に呼び出すだけです。

function f1() { ... }
function f2() { ... }
function f3() { ... }

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

JavaScript ライブラリのほとんどは、複数の関数呼び出しをイベント ハンドラに追加する方法を提供し、連鎖を行います。たとえば、jQuery を使用すると、次のことができます。

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

これにより、以前の呼び出しが新しい呼び出しで上書きされることはありませんが、3 つすべてがonloadイベントから呼び出されるように設定されます。

更新:それを処理する別の方法は、オブジェクトで使用addEventListenerするwindowことです。

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() { ... });

これらの 2 つのコード スニペットは、最初のコード スニペットと同等であり、互いに対応しています。

Answer 2

難読化されたコードのカテゴリの下で、脳のエクササイズと見なすオプションを次に示します。

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

Array.forEach()およびを実装するブラウザで動作しますFunction.prototype.bind()。

Answer 3

関数を使用してそれらを動的に追加します。

function addWindowOnload(next) {
    var prev = window.onload; 
    window.onload = function() {
        if (prev) prev();
        next();
    };
}

Answer 4

1 つの関数から呼び出す前に関数を定義できます。

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

ではaddEventListener()、 に対して複数のリスナーを定義できますonload。リスナーは定義順に実行されます。

Answer 5

すべての関数を匿名関数でラップするだけです

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