dispatchevent javascript w3schools

Diferencia entre document.addEventListener y window.addEventListener?

Question

Al usar PhoneGap, tiene un código JavaScript predeterminado 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?

Answer 1

El document y la window son objetos diferentes y tienen algunos eventos diferentes. El uso de addEventListener() en ellos escucha los eventos destinados a un objeto diferente. Debe usar el que realmente tiene el evento que le interesa.

Por ejemplo, hay un evento de "resize" en el objeto de window que no está en el objeto del document .

Por ejemplo, el evento "DOMContentLoaded" solo está en el objeto del document .

Entonces, básicamente, necesita saber qué objeto recibe el evento que le interesa y usar .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 click), 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 objeto del document antes del objeto de la window ya que aparece primero en la jerarquía, pero esa diferencia generalmente no es importante para que pueda elegir cualquiera. En general, me parece mejor elegir el objeto más cercano al origen del evento que satisfaga sus necesidades al manejar eventos propagados. Eso sugeriría que elija el document sobre la window cuando cualquiera de los dos funcionará. Pero, a menudo me muevo aún más cerca de la fuente y uso document.body o incluso algún padre común más cercano en el documento (si es posible).

Answer 2

Encontrará que en Javascript, generalmente hay muchas maneras diferentes de hacer lo mismo o encontrar la misma información. En su ejemplo, está buscando algún elemento que garantice que siempre existe. window y el document ajustan a la factura (con solo algunas diferencias).

Desde la red de desarrolladores de mozilla :

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

Así que mientras puedas contar con que tu "objetivo" siempre estará ahí, la única diferencia es qué eventos estás escuchando, así que solo usa tu favorito.