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

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?

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).

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.

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.