Unterschied zwischen document.addEventListener und window.addEventListener?

Lesezeit: 5 Minuten

Benutzer-Avatar
Charlie

Bei der Verwendung von PhoneGap wird ein standardmäßiger JavaScript-Code verwendet document.addEventListeneraber ich habe meinen eigenen Code, der verwendet window.addEventListener:

function onBodyLoad(){
  document.addEventListener("deviceready", onDeviceReady, false);
  document.addEventListener("touchmove", preventBehavior, false);
  
  window.addEventListener('shake', shakeEventDidOccur, false);
}

Was ist der Unterschied und was ist besser zu verwenden?

Benutzer-Avatar
jfriend00

Das document und window sind unterschiedliche Objekte und sie haben einige unterschiedliche Ereignisse. Verwenden addEventListener() auf ihnen lauscht auf Ereignisse, die für ein anderes Objekt bestimmt sind. Sie sollten diejenige verwenden, die tatsächlich die Veranstaltung enthält, an der Sie interessiert sind.

Beispielsweise gibt es eine "resize" Veranstaltung auf der window Objekt, das nicht auf dem ist document Objekt.

Zum Beispiel die "readystatechange" Veranstaltung ist nur auf der document Objekt.

Im Grunde müssen Sie also wissen, welches Objekt das Ereignis empfängt, an dem Sie interessiert sind, und das Sie verwenden .addEventListener() auf diesem bestimmten Objekt.

Hier ist ein interessantes Diagramm, das zeigt, welche Arten von Objekten welche Arten von Ereignissen erzeugen: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference


Wenn Sie auf ein weitergegebenes Ereignis (z. B. das Click-Ereignis) warten, können Sie dieses Ereignis entweder auf dem Dokumentobjekt oder auf dem Fensterobjekt überwachen. Der einzige Hauptunterschied für weitergegebene Ereignisse liegt im Timing. Die Veranstaltung trifft die document Objekt vor dem window Objekt, da es in der Hierarchie an erster Stelle steht, aber dieser Unterschied ist normalerweise unwesentlich, sodass Sie beides auswählen können. Ich finde es im Allgemeinen besser, das Objekt auszuwählen, das der Quelle des Ereignisses am nächsten liegt und Ihre Anforderungen beim Umgang mit weitergegebenen Ereignissen erfüllt. Das würde darauf hindeuten, dass Sie wählen document Über window wann beide funktionieren. Aber ich würde oft noch näher an die Quelle heranrücken und sie verwenden document.body oder sogar ein enger gemeinsamer Elternteil im Dokument (wenn möglich).

  • Ich war neugierig auf die Sache “bis zum Dokument, aber nicht zum Fenster sprudeln”. Also habe ich es hier getestet -> jsfiddle.net/k3qv9/1 Übersehe ich etwas oder tritt das Blubbern tatsächlich auf?

    – João Paulo Macedo

    20. August 2012 um 21:43 Uhr

  • @JOPLOmacedo – vor deinem Kommentar habe ich den Teil über das Sprudeln entfernt, da ich mir nicht sicher bin, welche Ereignisse zum Fenster sprudeln und welche nicht. Das Protokoll, das ich immer gesehen habe, besteht darin, dokumentenweit sprudelnde Ereignisse abzufangen document.body Objekt oder die document Objekt, so dass es keinen Grund gibt, es zu verwenden window für gesprudelte Ereignisse. Auf jeden Fall ist der Punkt meiner Antwort, dass einige Ereignisse nur an sind window und einige Ereignisse sind nur an document und einige sind auf beiden, also sollte das OP das Objekt auswählen, das dem Ereignis entspricht, das es behandeln möchte.

    – jfriend00

    20. August 2012 um 21:47 Uhr

  • Alles klar. Das mache ich normalerweise auch – genau deshalb habe ich mich entschieden, es zu testen. Danke für die Antwort!

    – João Paulo Macedo

    20. August 2012 um 21:52 Uhr

  • Da das ‘Klick’-Ereignis sowohl im Dokument als auch im Fenster verfügbar ist, und wenn wir das Ereignis sowohl im Dokument als auch im Fenster registrieren, wird zuerst der Klick-Handler des Dokuments ausgelöst und dann das Fenster. daher ist für diesen Gesichtspunkt die Wahl des Dokuments besser. jsfiddle.net/3LcVw

    – Codierer

    2. August 2014 um 19:47 Uhr


  • Ein weiteres Beispiel: Wenn Sie hinzufügen addEventListener("keydown", event) über window für Samsung TV, dann wird es nicht funktionieren. Aber Sie werden dasselbe mit tun document, dann wird es. Hängt auch vom jeweiligen Gerät ab, wie es Bubble-Ereignisse aufruft.

    – Jakob Kubista

    20. Januar 2020 um 11:17 Uhr

Benutzer-Avatar
Bryan Wolfford

Sie werden feststellen, dass es in Javascript normalerweise viele verschiedene Möglichkeiten gibt, dasselbe zu tun oder dieselben Informationen zu finden. In Ihrem Beispiel suchen Sie nach einem Element, das garantiert immer vorhanden ist. window und document beide passen (mit nur wenigen Unterschieden).

Aus Mozilla-Entwicklernetzwerk:

addEventListener() registriert einen einzelnen Ereignis-Listener auf einem einzelnen Ziel. Das Ereignisziel kann ein einzelnes Element in einem Dokument, das Dokument selbst, ein Fenster oder eine XMLHttpRequest sein.

Solange Sie sich darauf verlassen können, dass Ihr “Ziel” immer da ist, besteht der einzige Unterschied darin, welche Ereignisse Sie hören, also verwenden Sie einfach Ihren Favoriten.

  • Dies ist nicht allgemein wahr. An unterschiedlichen Objekten treten unterschiedliche Ereignisse auf. document und window erhalten nicht die gleichen Ereignisse. Sie müssen das Objekt auswählen, das das Ereignis erhält, an dem Sie interessiert sind. Einige Ereignisse können an beide gehen document und windowaber nicht alles.

    – jfriend00

    20. August 2012 um 21:38 Uhr


Das window Bindung bezieht sich auf ein eingebautes Objekt, das vom Browser bereitgestellt wird. Es stellt das Browserfenster dar, das die enthält document. Rufen Sie es an addEventListener -Methode registriert das zweite Argument (Callback-Funktion), das immer dann aufgerufen wird, wenn das durch sein erstes Argument beschriebene Ereignis eintritt.

<p>Some paragraph.</p>
<script>
  window.addEventListener("click", () => {
    console.log("Test");
  });
</script>

Folgende Punkte sollten beachtet werden, bevor Sie Fenster oder Dokument zu addEventListners auswählen

  1. Die meisten Veranstaltungen sind gleich window oder document aber einige Ereignisse wie resizeund andere Ereignisse im Zusammenhang mit loading,
    unloadingund opening/closing sollten alle auf das Fenster gesetzt werden.
  2. Da das Dokument das Fenster hat, ist es empfehlenswert, das Dokument zu verwenden (wenn es damit umgehen kann), da das Ereignis zuerst auf das Dokument trifft.
  3. Internet Explorer reagiert nicht auf viele im Fenster registrierte Ereignisse, daher müssen Sie das Dokument zum Registrieren von Ereignissen verwenden.

Benutzer-Avatar
Omar Khalil

Meiner Meinung nach ist es im Allgemeinen besser, das Objekt auszuwählen, das der Quelle des Ereignisses am nächsten liegt und Ihre Anforderungen beim Umgang mit weitergegebenen Ereignissen erfüllt.

Wenn Sie also möchten, dass das Ereignis mit dem Element passiert, ist es besser, es zu verwenden window.addEventListener() (Angenommen, die Fenstervariable ist ein Element), denn das Wichtigste hier beim Abhören eines Ereignisses ist, dass der Code und die Ereignisausführung schneller funktionieren: Das Einzige, was in diesem Fall zählt.

1295520cookie-checkUnterschied zwischen document.addEventListener und window.addEventListener?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy