¿Diferencia entre document.addEventListener y window.addEventListener?

Después de mucho luchar pudimos encontrar la solución de este contratiempo que muchos usuarios de nuestra web presentan. Si tienes alguna información que aportar no dejes de dejar tu conocimiento.

Solución:

los document y window son objetos diferentes y tienen algunos eventos diferentes. Usando 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 window objeto que no está en el document objeto.

por ejemplo, el "DOMContentLoaded" evento es solo en el document objeto.

Básicamente, necesita saber qué objeto recibe el evento que le interesa y usa .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), entonces puede escuchar ese evento en el objeto de documento o en el objeto de ventana. La única diferencia principal para los eventos propagados está en el tiempo. El evento tocará el document objeto ante el window objeto ya que aparece primero en la jerarquía, pero esa diferencia suele ser irrelevante, por lo que puede elegir cualquiera. 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 sugeriría que elijas document sobre window cuando cualquiera funcionará. Pero, a menudo me acercaba aún más a la fuente y usaba document.body o incluso algún padre común más cercano en el documento (si es posible).

Descubrirá 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 esté garantizado que siempre existirá. window y document ambos encajan a la perfección (con solo algunas diferencias).

Desde la red de desarrollo de Mozilla:

addEventListener() registra un solo detector de eventos en un solo destino. El destino del evento puede ser un solo elemento en un documento, el propio documento, una ventana o un XMLHttpRequest.

Entonces, siempre que pueda contar con que su “objetivo” siempre estará allí, la única diferencia es qué eventos está escuchando, así que solo use su favorito.

los window vinculante se refiere a un objeto integrado proporcionado por el navegador. Representa la ventana del navegador que contiene el document. llamando a su addEventListener El mé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.

Some paragraph.

Se deben tener en cuenta los siguientes puntos antes de seleccionar la ventana o el documento para agregarEventListners

1. La mayoría de los eventos son los mismos para window o document pero algunos eventos como resizey otros eventos relacionados con loading,
   unloadingy opening/closing todo debe estar configurado 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 llegará primero al documento.
3. Internet Explorer no responde a muchos eventos registrados en la ventana, por lo que deberá usar un documento para registrar el evento.

---

---

Utiliza Nuestro Buscador