¿Diferencia entre document.addEventListener y window.addEventListener?
Mientras uso PhoneGap, tiene un código JavaScript predeterminado que usa document.addEventListener, pero yo 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?
Los documenty windowson objetos diferentes y tienen algunos eventos diferentes. Al usarlos, addEventListener()se escuchan eventos destinados a un objeto diferente. Debes utilizar el que realmente tenga el evento que te interesa.
Por ejemplo, hay un "resize"evento en el windowobjeto que no está en el documentobjeto.
Por ejemplo, el "readystatechange"evento es sólo en el documentobjeto.
Básicamente, necesita 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 importante para los eventos propagados es el momento. El evento afectará al documentobjeto antes que al windowobjeto, ya que ocurre primero en la jerarquía, pero esa diferencia generalmente es irrelevante, por lo que puede elegir cualquiera de los dos. En general, encuentro que es mejor elegir el objeto más cercano al origen del evento que satisfaga sus necesidades al manejar eventos propagados. Eso sugeriría que elijas documentcuándo windowfuncionará cualquiera de los dos. Pero, a menudo me acerco aún más a la fuente y uso document.bodyo incluso algún padre común más cercano en el documento (si es posible).
El windowenlace se refiere a un objeto integrado proporcionado por el navegador. Representa la ventana del navegador que contiene el archivo document. Llamar a su addEventListenermétodo registra el segundo argumento (función de devolución de llamada) que se llamará cada vez que ocurra el evento descrito por su primer argumento.
<p>Some paragraph.</p>
<script>
window.addEventListener("click", () => {
console.log("Test");
});
</script>
Se deben tener en cuenta los siguientes puntos antes de seleccionar una ventana o documento para agregarEventListners
- La mayoría de los eventos son los mismos para
windowodocumentpero algunos eventos comoresizey otros eventos relacionados conloading,unloadingyopening/closingdeben configurarse en la ventana. - Dado que la ventana tiene el documento, es una buena práctica utilizar el documento para manejarlo (si puede manejarlo), ya que el evento afectará primero al documento.
- Internet Explorer no responde a muchos eventos registrados en la ventana, por lo que deberá utilizar un documento para registrar el evento.
Descubrirá que en JavaScript suele haber muchas formas diferentes de hacer lo mismo o encontrar la misma información. En su ejemplo, está buscando algún elemento que esté garantizado que existirá siempre. windowy documentambos cumplen los requisitos (con sólo algunas diferencias).
Desde la red de desarrollo de Mozilla :
addEventListener() registra un único detector de eventos en un único objetivo. El objetivo del evento puede ser un único elemento de un documento, el documento en sí, una ventana o una XMLHttpRequest.
Entonces, mientras puedas contar con que tu "objetivo" siempre estará ahí, la única diferencia es qué eventos estás escuchando, así que usa tu favorito.
