Unterschied zwischen window.onload und window.addEventListener

Wenn Sie eine Website erstellen und eine Aktion in Javascript ausführen möchten, wenn die Seite vollständig geladen ist, gibt es zwei Möglichkeiten:

1. window.onload
2. window.addEventListener

Beides sind die Ereignisse, die aufgerufen werden, wenn die Seite vollständig geladen ist. Es gibt jedoch einen großen Unterschied, der beim Erstellen großer Projekte von Bedeutung ist. Der Unterschied ist, dass window.onload Das Ereignis wird nur einmal aufgerufen und überschreibt das zuvor angehängte Onload-Ereignis. Während auf der anderen Seite mit window.addEventListener Sie können beliebig viele Funktionen hinzufügen, die alle parallel aufgerufen werden.

Nehmen Sie zum Beispiel den folgenden Code:

// Using window.onload event twice
window.onload = function () {
    console.log("onload 1");
};

window.onload = function () {
    console.log("onload 2");
};

// Using window.addEventListener event twice
window.addEventListener("load", function () {
    console.log("addEventListener 1");
});

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

Wir hängen das erste Onload-Ereignis an und zeigen „Onload 1“ in der Browserkonsole an. Das zweite Onload-Ereignis zeigt die Meldung „Onload 2“ in der Konsole an. In ähnlicher Weise haben wir 2 Ereignisse hinzugefügt, diesmal jedoch mit der Funktion addEventListener. Der erste Parameter ist der Name des Ereignisses, das „Laden“ ist, und der zweite ist die Funktion, die aufgerufen wird.

Sie werden sehen, dass wir beide Ereignisse zweimal aufrufen, um zu sehen, welches zweimal aufgerufen wurde. Wenn Sie den obigen Code in Ihrer Javascript-Datei ausführen, werden in Ihrer Konsole die folgenden Zeilen angezeigt:

Das liegt daran, dass die window.onload ist ein Attribut wie eine Variable. Wenn Sie dieses Ereignis zum zweiten Mal verwenden, wird seine vorherige Funktion durch die neue ersetzt. Genauso wie Sie den Wert der Variablen aktualisieren. Sie können feststellen, dass die Syntax ist window.onload = function () {} Dies bedeutet, dass es sich um ein Attribut handelt, dessen Wert ersetzt werden kann.

Andererseits, window.addEventListener Sie können sehen, dass es eine Funktion ist. Sie können erkennen, dass es eine Klammer () gibt und wir wissen, dass es eine Funktion sein muss, wenn am Ende eines Namens eine Klammer steht. Sie können auch sehen, dass es 2 Parameter hat, Funktionen haben auch Parameter. Wenn Sie dieses Ereignis aufrufen und Ihre Funktion im zweiten Parameter übergeben, wird es in einem Stapel von „Lade“ -Ereignissen abgelegt. Deshalb sind alle Funktionen von addEventListener werden ohne Überschreiben aufgerufen.

Fazit

Wir empfehlen Ihnen dringend, sich daran zu gewöhnen, das zu verwenden window.addEventListener da es zuverlässiger ist. Weil es manchmal vorkommt, dass Ihr window.onload Funktion wurde nicht aufgerufen und Sie fragen sich, warum sie nicht aufgerufen wird, und der Grund ist einfach: „An einer anderen Stelle im Code wird dieses Attribut von einer anderen Funktion überschrieben.“.

Wenn Sie diesen Artikel hilfreich finden, teilen Sie ihn bitte mit anderen. Wenn also jemand anderes dieses Problem oder diese Verwirrung hat, kann es gelöst werden.