web-dev-qa-db-fra.com

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

Tout en utilisant 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 qui est préférable d'utiliser?

javascripteventsdomevent-listener
114
Charlie

Les document et window sont des objets différents et ils ont des événements différents. Utiliser addEventListener() sur ceux-ci écoute les événements destinés à un autre objet. Vous devez utiliser celui qui contient l'événement qui vous intéresse.

Par exemple, il existe un événement "resize" Sur l'objet window qui ne se trouve pas sur l'objet document.

Par exemple, l'événement "DOMContentLoaded" Ne concerne que l'objet document.

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

Voici un tableau 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 click), vous pouvez écouter cet événement sur l'objet document ou sur l'objet window. La seule différence principale pour les événements propagés est le timing. L'événement atteindra l'objet document avant l'objet window car il apparaît 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éponde à vos besoins lors du traitement des événements propagés. Cela suggérerait que vous choisissiez document sur window quand l'un ou l'autre fonctionnerait. Mais, souvent, je me rapprochais encore plus de la source et utilisais document.body Ou même un parent commun plus proche dans le document (si possible).

133
jfriend00

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 la même information. Dans votre exemple, vous recherchez un élément dont l'existence est garantie. window et document conviennent tous les deux (avec seulement quelques différences).

De réseau de développement mozilla :

addEventListener () enregistre un écouteur d'événement unique sur une cible unique. La cible d'é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 présente, la seule différence réside dans les événements que vous écoutez, utilisez donc simplement votre favori.

5
Bryan Wolfford