При использовании PhoneGap у него есть код JavaScript по умолчанию, который использует document.addEventListener, но у меня есть собственный код, который использует window.addEventListener:
function onBodyLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("touchmove", preventBehavior, false);
window.addEventListener('shake', shakeEventDidOccur, false);
}
В чем разница и которую лучше использовать?
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 или даже приблизительный общий родительский элемент в документе (если это возможно).
Вы обнаружите, что в javascript обычно существует много разных способов сделать то же самое или найти ту же информацию. В вашем примере вы ищете некоторый элемент, который, как гарантируется, всегда существует. window и document соответствуют размеру счета (всего несколько отличий).
От сеть mozilla dev:
addEventListener() регистрирует один прослушиватель событий на одном цель. Целевой объект может быть единственным элементом в документе, сам документ, окно или XMLHttpRequest.
Итак, пока вы можете рассчитывать на то, что ваша "цель" всегда там, единственная разница - это то, что вы слушаете, поэтому просто используйте свой любимый.