Разница между document.addEventListener и window.addEventListener?

При использовании PhoneGap у него есть код JavaScript по умолчанию, который использует document.addEventListener, но у меня есть собственный код, который использует window.addEventListener:

function onBodyLoad(){
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("touchmove", preventBehavior, false);
    window.addEventListener('shake', shakeEventDidOccur, false);
}

В чем разница и которую лучше использовать?

Ответы

Ответ 1

document и window - разные объекты, и у них есть разные события. Используя addEventListener(), они прослушивают события, предназначенные для другого объекта. Вы должны использовать тот, который на самом деле имеет интересующее вас событие.

Например, есть событие "resize" в объекте window, который не находится в объекте document.

Например, событие "DOMContentLoaded" относится только к объекту document.

Итак, в принципе, вам нужно знать, какой объект получает интересующее вас событие и использовать .addEventListener() для этого конкретного объекта.

Здесь интересная диаграмма, показывающая, какие типы объектов создают типы событий: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

Если вы слушаете распространенное событие (например, событие click), вы можете прослушивать это событие как для объекта документа, так и для объекта окна. Единственное основное различие для распространенных событий - это время. Событие попадет в объект document перед объектом window, поскольку оно происходит сначала в иерархии, но эта разница обычно несущественна, поэтому вы можете выбрать ее. Я считаю, что лучше всего выбрать ближайший объект к источнику события, который соответствует вашим потребностям при обработке распространенных событий. Это предполагает, что вы выбираете document над window, когда либо будет работать. Но я бы часто двигался еще ближе к источнику и использовал document.body или даже приблизительный общий родительский элемент в документе (если это возможно).

Ответ 2

Вы обнаружите, что в javascript обычно существует много разных способов сделать то же самое или найти ту же информацию. В вашем примере вы ищете некоторый элемент, который, как гарантируется, всегда существует. window и document соответствуют размеру счета (всего несколько отличий).

От сеть mozilla dev:

addEventListener() регистрирует один прослушиватель событий на одном цель. Целевой объект может быть единственным элементом в документе, сам документ, окно или XMLHttpRequest.

Итак, пока вы можете рассчитывать на то, что ваша "цель" всегда там, единственная разница - это то, что вы слушаете, поэтому просто используйте свой любимый.