¿Diferencia entre document.addEventListener y window.addEventListener?

Mientras uso PhoneGap, tiene un código predeterminado de JavaScript que usa document.addEventListener, pero tengo mi propio código que usa window.addEventListener:

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

¿Cuál es la diferencia y cuál es mejor usar?

El documenty windowson objetos diferentes y tienen algunos eventos diferentes. Usar addEventListener()en ellos escucha eventos destinados a un objeto diferente. Debe usar el que realmente tiene el evento que le interesa.

Por ejemplo, hay un "resize"evento en el windowobjeto que no está en el documentobjeto.

Por ejemplo, el "DOMContentLoaded"evento es solo en el documentobjeto.

Básicamente, debe saber qué objeto recibe el evento que le interesa y utilizarlo .addEventListener()en ese objeto en particular.

Aquí hay un gráfico interesante que muestra qué tipos de objetos crean qué tipos de eventos: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

Si está escuchando un evento propagado (como el evento de clic), puede escuchar ese evento en el objeto del documento o en el objeto de la ventana. La única diferencia principal para los eventos propagados está en el tiempo. El evento golpeará el documentobjeto antes que el windowobjeto ya que ocurre primero en la jerarquía, pero esa diferencia generalmente es irrelevante para que pueda elegir cualquiera de los dos. En general, me parece mejor elegir el objeto más cercano a la fuente del evento que satisfaga sus necesidades al manejar eventos propagados. Eso hace pensar que usted escoja documentmás windowcuando cualquiera va a funcionar. Pero, a menudo me acerco aún más a la fuente y uso document.bodyo incluso a un padre común más cercano en el documento (si es posible).

Encontrará que en JavaScript, generalmente hay muchas formas diferentes de hacer lo mismo o encontrar la misma información. En su ejemplo, está buscando algún elemento que garantice que siempre exista. windowy documentambos encajan perfectamente (con solo algunas diferencias).

Desde la red de desarrollo de mozilla :

addEventListener () registra un único detector de eventos en un único objetivo. El destino del evento puede ser un único elemento en un documento, el documento en sí, una ventana o una solicitud XMLHttpRequest.

Por lo tanto, siempre que pueda contar con que su "objetivo" siempre esté allí, la única diferencia es qué eventos está escuchando, así que use su favorito.

El windowenlace se refiere a un objeto incorporado proporcionado por el navegador. Representa la ventana del navegador que contiene el document. Llamar a su addEventListenermétodo registra el segundo argumento (función de devolución de llamada) que se llamará siempre que ocurra el evento descrito por su primer argumento.

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

Deben tenerse en cuenta los siguientes puntos antes de seleccionar una ventana o documento para agregarEventListners

1. La mayoría de los eventos son para la misma windowo document, pero algunos eventos como resize, y otros eventos relacionados con loading, unloadingyopening/closing todo se debe establecer en la ventana.
2. Dado que la ventana tiene el documento, es una buena práctica usar el documento para manejar (si puede manejar) ya que el evento golpeará primero al documento.
3. Internet Explorer no responde a muchos eventos registrados en la ventana, por lo que deberá usar el documento para registrar el evento.