Différence entre document.addEventListener et window.addEventListener?

135

Lors de l'utilisation de PhoneGap, il a un code JavaScript par défaut qui utilise document.addEventListener, mais j'ai mon propre code qui utilise window.addEventListener:

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

Quelle est la différence et quelle est la meilleure utilisation?

Charlie
la source

Réponses:

160

Les documentet windowsont des objets différents et ils ont des événements différents. En utilisantaddEventListener() sur eux écoute les événements destinés à un objet différent. Vous devez utiliser celui qui a réellement l'événement qui vous intéresse.

Par exemple, il y a un "resize"événement sur l' windowobjet qui n'est pas sur l' documentobjet.

Par exemple, l' "DOMContentLoaded"événement est uniquement sur l' documentobjet.

Donc, fondamentalement, vous devez savoir quel objet reçoit l'événement qui vous intéresse et que vous utilisez .addEventListener()sur cet objet particulier.

Voici un graphique intéressant qui montre quels types d'objets créent quels types d'événements: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference


Si vous écoutez un événement propagé (tel que l'événement de clic), vous pouvez écouter cet événement sur l'objet document ou sur l'objet fenêtre. La seule différence principale pour les événements propagés réside dans le temps. L'événement touchera l' documentobjet avant l' windowobjet puisqu'il se produit en premier dans la hiérarchie, mais cette différence est généralement sans importance, vous pouvez donc choisir l'un ou l'autre. Je trouve généralement préférable de choisir l'objet le plus proche de la source de l'événement qui répond à vos besoins lors de la gestion des événements propagés. Cela donne à penser que vous prenez documentplus windowquand soit fonctionnera. Mais, je me rapprocherais souvent encore plus de la source et utiliserais document.bodyou même un parent commun plus proche dans le document (si possible).

jfriend00
la source
J'étais curieux de savoir "bouillonner jusqu'au document mais pas à la fenêtre". Alors je l'ai testé ici -> jsfiddle.net/k3qv9/1 Est-ce que je manque quelque chose ou est-ce que le bouillonnement se produit réellement?
banzomaikaka
1
@JOPLOmacedo - avant votre commentaire, j'ai supprimé la partie sur le bouillonnement car je ne sais pas quels événements bouillonnent dans la fenêtre et lesquels ne le font pas. Le protocole que j'ai toujours vu consiste à intercepter les événements de bullage au niveau de l' document.bodyobjet ou de l' documentobjet afin qu'il n'y ait aucune raison de l'utiliser windowpour les événements de bullage . Dans tous les cas, le but de ma réponse est que certains événements sont uniquement activés windowet certains événements sont uniquement activés documentet certains sont sur les deux, de sorte que l'OP doit choisir l'objet qui correspond à l'événement qu'il souhaite gérer.
jfriend00
Okey dokey. C'est ce que je fais habituellement aussi - c'est exactement pourquoi j'ai décidé de le tester. Merci d'avoir répondu!
banzomaikaka
Puisque l'événement «clic» est disponible à la fois dans le document et dans la fenêtre et si nous enregistrons l'événement à la fois sur le document et sur la fenêtre, le gestionnaire de clic du document déclenche d'abord puis fenêtre. donc pour ce point de vue le choix du document est meilleur. jsfiddle.net/3LcVw
codeur
1
Un autre exemple: si vous ajoutez addEventListener("keydown", event)via windowpour Samsung TV, cela ne fonctionnera pas. Mais vous ferez la même chose avec document, alors ce sera le cas. Dépend également de l'appareil spécifique comment il appelle les événements à bulles.
Jakub Kubista
4

Vous constaterez qu'en javascript, il existe généralement de nombreuses façons différentes de faire la même chose ou de trouver les mêmes informations. Dans votre exemple, vous recherchez un élément qui est garanti pour toujours exister. windowet les documentdeux correspondent à la facture (à quelques différences près).

Depuis le réseau de développement de Mozilla :

addEventListener () enregistre un seul écouteur d'événement sur une seule cible. La cible de l'événement peut être un élément unique dans un document, le document lui-même, une fenêtre ou un XMLHttpRequest.

Donc, tant que vous pouvez compter sur votre «cible» toujours là, la seule différence réside dans les événements que vous écoutez, alors utilisez simplement votre favori.

Bryan Wolfford
la source
5
Ce n'est pas génériquement vrai. Différents événements se produisent sur différents objets. documentet windowne reçoivent pas les mêmes événements. Vous devez choisir l'objet qui reçoit l'événement qui vous intéresse. Certains événements peuvent aller aux deux documentet window, mais pas à tous.
jfriend00
1

La windowliaison fait référence à un objet intégré fourni par le navigateur. Il représente la fenêtre du navigateur qui contient le fichier document. L'appel de sa addEventListenerméthode enregistre le deuxième argument (fonction de rappel) à appeler chaque fois que l'événement décrit par son premier argument se produit.

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

Les points suivants doivent être notés avant de sélectionner la fenêtre ou le document à ajouter

  1. La plupart des événements sont les mêmes pour windowou , documentmais certains événements comme resize, et d' autres événements liés à loading, unloadingetopening/closing doivent être réglés sur la fenêtre.
  2. Puisque window a le document, il est recommandé d'utiliser le document pour gérer (s'il peut gérer) puisque l'événement touchera le document en premier.
  3. Internet Explorer ne répond pas à de nombreux événements enregistrés dans la fenêtre, vous devrez donc utiliser le document pour enregistrer l'événement.
Un consommateur
la source