Unterschied zwischen document.addEventListener und window.addEventListener?

Während der Verwendung von PhoneGap wird standardmäßig JavaScript-Code verwendet document.addEventListener, aber ich habe meinen eigenen Code, der Folgendes 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?

Die documentund windowsind verschiedene Objekte und sie haben verschiedene Ereignisse. Verwenden vonaddEventListener() sie verwenden, werden Ereignisse abgehört, die für ein anderes Objekt bestimmt sind. Sie sollten diejenige verwenden, die tatsächlich das Ereignis hat, an dem Sie interessiert sind.

Beispielsweise gibt es ein "resize"Ereignis für das windowObjekt, das sich nicht auf dem documentObjekt befindet.

Beispielsweise befindet sich das "DOMContentLoaded"Ereignis nur auf dem documentObjekt.

Grundsätzlich müssen Sie wissen, welches Objekt das Ereignis empfängt, an dem Sie interessiert sind, und es .addEventListener()für dieses bestimmte Objekt verwenden.

Hier ist ein interessantes Diagramm, das zeigt, welche Objekttypen welche Ereignistypen erstellen: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

Wenn Sie ein weitergegebenes Ereignis (z. B. das Klickereignis) abhören, können Sie dieses Ereignis entweder im Dokumentobjekt oder im Fensterobjekt abhören. Der einzige Hauptunterschied für propagierte Ereignisse besteht im Timing. Das Ereignis trifft das documentObjekt vor dem windowObjekt, da es zuerst in der Hierarchie auftritt. Dieser Unterschied ist jedoch normalerweise unerheblich, sodass Sie beide auswählen können. Ich finde es im Allgemeinen besser, das Objekt auszuwählen, das der Quelle des Ereignisses am nächsten liegt und Ihren Anforderungen bei der Behandlung von propagierten Ereignissen entspricht. Das würde vorschlagen , dass Sie holen documentüber , windowwenn entweder funktioniert. Aber ich bin oft noch näher an die Quelle herangekommen und habe ( document.bodyoder wenn möglich) ein näheres gemeinsames übergeordnetes Element im Dokument verwendet.

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 existiert. windowunddocument beide passen auf die Rechnung (mit nur wenigen Unterschieden).

Aus dem Mozilla Dev Network :

addEventListener () registriert einen einzelnen Ereignis-Listener für ein einzelnes 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, auf welche Ereignisse Sie hören. Verwenden Sie also einfach Ihren Favoriten.

Die windowBindung bezieht sich auf ein vom Browser bereitgestelltes integriertes Objekt. Es stellt das Browserfenster dar, das das enthält document. Durch Aufrufen der addEventListenerMethode wird das zweite Argument (Rückruffunktion) registriert, das aufgerufen werden soll, wenn das durch das erste Argument beschriebene Ereignis auftritt.

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

Die folgenden Punkte sollten beachtet werden, bevor Sie ein Fenster oder Dokument auswählen, um EventListners hinzuzufügen

1. Die meisten Veranstaltungen sind gleich für windowoder documentaber einige Ereignisse wie resizeund andere Veranstaltungen in Zusammenhang mit loading, unloadingund opening/closingsollten alle auf dem Fenster eingestellt werden.
2. Da das Fenster über das Dokument verfügt, empfiehlt es sich, das Dokument für die Verarbeitung zu verwenden (sofern dies möglich ist), da das Ereignis zuerst das Dokument trifft.
3. Internet Explorer reagiert nicht auf viele im Fenster registrierte Ereignisse. Daher müssen Sie das Dokument zum Registrieren des Ereignisses verwenden.