Ao usar o PhoneGap, ele tem algum código JavaScript padrão que usa document.addEventListener, mas eu tenho meu próprio código que usa window.addEventListener:
function onBodyLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("touchmove", preventBehavior, false);
window.addEventListener('shake', shakeEventDidOccur, false);
}
Qual é a diferença e qual é melhor usar?
Respostas:
Os objetos documente windowsão diferentes e eles têm alguns eventos diferentes. O uso addEventListener()deles ouve eventos destinados a um objeto diferente. Você deve usar aquele que realmente tem o evento em que está interessado.
Por exemplo, há um "resize"evento no windowobjeto que não está no documentobjeto.
Por exemplo, o "DOMContentLoaded"evento está apenas no documentobjeto.
Então, basicamente, você precisa saber em qual objeto recebe o evento em que está interessado e usar .addEventListener()nesse objeto específico.
Aqui está um gráfico interessante que mostra quais tipos de objetos criam quais tipos de eventos: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference
Se você estiver ouvindo um evento propagado (como o evento click), poderá ouvir esse evento no objeto de documento ou no objeto de janela. A única diferença principal para eventos propagados está no tempo. O evento atingirá o documentobjeto antes do windowobjeto, uma vez que ocorre primeiro na hierarquia, mas essa diferença geralmente é irrelevante para que você possa escolher qualquer um. Acho que geralmente é melhor escolher o objeto mais próximo da origem do evento que atenda às suas necessidades ao lidar com eventos propagados. Isso sugeriria que você escolher documentsobre windowquando ou vai funcionar. Porém, eu costumava me aproximar ainda mais da fonte e usar document.bodyou até mesmo um parente mais próximo no documento (se possível).
document.bodyobjeto ou no documentobjeto, para que não haja motivo para usá window-los. De qualquer forma, o ponto da minha resposta é que alguns eventos estão apenas ativados windowe alguns estão ativos documente outros estão em ambos, portanto, o OP deve escolher o objeto que corresponde ao evento que deseja manipular.
addEventListener("keydown", event)via windowpara a Samsung TV, ela não funcionará. Mas você fará a mesma coisa document, e então fará. Depende também do dispositivo específico como ele chama eventos com bolhas.
Você encontrará que, em javascript, geralmente existem muitas maneiras diferentes de fazer a mesma coisa ou encontrar as mesmas informações. No seu exemplo, você está procurando por algum elemento que é garantido que sempre existe. windowe documentambos se encaixam na conta (com apenas algumas diferenças).
Da rede mozilla dev :
addEventListener () registra um único ouvinte de evento em um único destino. O destino do evento pode ser um único elemento em um documento, o próprio documento, uma janela ou um XMLHttpRequest.
Contanto que você possa contar com o seu "alvo" sempre presente, a única diferença é que eventos você está ouvindo; portanto, use o seu favorito.
documente windownão recebe os mesmos eventos. Você deve escolher o objeto que obtém o evento no qual está interessado. Alguns eventos podem ir para ambos documente window, mas não para todos.
A windowligação refere-se a um objeto interno fornecido pelo navegador. Representa a janela do navegador que contém o document. A chamada de seu addEventListenermétodo registra o segundo argumento (função de retorno de chamada) a ser chamado sempre que ocorrer o evento descrito por seu primeiro argumento.
<p>Some paragraph.</p>
<script>
window.addEventListener("click", () => {
console.log("Test");
});
</script>
Os seguintes pontos devem ser observados antes da janela ou documento selecionado para addEventListners
windowou documentmas alguns eventos como resize, e outros eventos relacionados com a loading,
unloadinge opening/closingtodos devem ser definidos na janela.