Durante l'utilizzo di PhoneGap, ha un codice JavaScript predefinito che utilizza document.addEventListener, ma ho il mio codice che utilizza window.addEventListener:
function onBodyLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("touchmove", preventBehavior, false);
window.addEventListener('shake', shakeEventDidOccur, false);
}Qual è la differenza e quale è meglio usare?
Risposte:
Gli documente windowsono oggetti diversi e hanno eventi diversi. Usandoli si addEventListener()ascoltano gli eventi destinati a un altro oggetto. Dovresti usare quello che ha effettivamente l'evento a cui sei interessato.
Ad esempio, c'è un "resize"evento windowsull'oggetto che non è documentsull'oggetto.
Ad esempio, l' "DOMContentLoaded"evento è solo documentsull'oggetto.
Quindi, in sostanza, devi sapere quale oggetto riceve l'evento che ti interessa e utilizzare .addEventListener()su quel particolare oggetto.
Ecco un grafico interessante che mostra quali tipi di oggetti creano quali tipi di eventi: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference
Se stai ascoltando un evento propagato (come l'evento click), puoi ascoltare quell'evento sull'oggetto documento o sull'oggetto finestra. L'unica differenza principale per gli eventi propagati è nei tempi. L'evento colpirà l' documentoggetto prima windowdell'oggetto poiché si verifica per primo nella gerarchia, ma quella differenza è generalmente irrilevante, quindi puoi sceglierne uno. Trovo generalmente meglio scegliere l'oggetto più vicino alla fonte dell'evento che soddisfi le tue esigenze durante la gestione di eventi propagati. Ciò suggerirebbe che si documentriprenderà windowquando entrambi funzioneranno. Ma spesso mi sposto ancora più vicino alla fonte e uso document.bodyo anche qualche genitore comune più vicino nel documento (se possibile).
document.bodynell'oggetto o documentnell'oggetto, quindi non c'è motivo di usarli windowper eventi di bolle. In ogni caso il punto della mia risposta è che alcuni eventi sono solo attivi windowe alcuni eventi solo attivi documente altri attivi entrambi, pertanto l'OP deve scegliere l'oggetto corrispondente all'evento che desidera gestire.
addEventListener("keydown", event)tramite windowSamsung TV, non funzionerà. Ma farai la stessa cosa con document, allora lo farà. Dipende anche da un dispositivo specifico come chiama gli eventi gorgoglianti.
Scoprirai che in JavaScript, di solito ci sono molti modi diversi per fare la stessa cosa o trovare le stesse informazioni. Nel tuo esempio, stai cercando alcuni elementi garantiti per esistere sempre. windowedocument entrambi si adattano al conto (con solo alcune differenze).
Dalla rete di sviluppo mozilla :
addEventListener () registra un listener di singolo evento su una singola destinazione. La destinazione dell'evento può essere un singolo elemento in un documento, il documento stesso, una finestra o un XMLHttpRequest.
Quindi finché puoi contare sul fatto che il tuo "target" è sempre lì, l'unica differenza è quali eventi stai ascoltando, quindi usa il tuo preferito.
documente windownon ricevere gli stessi eventi. Devi scegliere l'oggetto che ottiene l'evento a cui sei interessato. Alcuni eventi possono andare a entrambi documente window, ma non a tutti.
L' windowassociazione si riferisce a un oggetto incorporato fornito dal browser. Rappresenta la finestra del browser che contiene il file document. La chiamata del suo addEventListenermetodo registra il secondo argomento (funzione di callback) da chiamare ogni volta che si verifica l'evento descritto dal suo primo argomento.
<p>Some paragraph.</p>
<script>
window.addEventListener("click", () => {
console.log("Test");
});
</script>I seguenti punti devono essere annotati prima di selezionare la finestra o il documento da aggiungereEventListners
windowo document, ma alcuni eventi come resize, e altri eventi legati alla loading,
unloadingeopening/closing devono essere tutti impostati sulla finestra.