Os objetos document
e window
sã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 window
objeto que não está no document
objeto.
Por exemplo, o "DOMContentLoaded"
evento está apenas no document
objeto.
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 document
objeto antes do window
objeto, 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 document
sobre window
quando ou vai funcionar. Porém, eu costumava me aproximar ainda mais da fonte e usar document.body
ou até mesmo um parente mais próximo no documento (se possível).