web-dev-qa-db-ja.com

document.addEventListenerとwindow.addEventListenerの違いは？

PhoneGapの使用中、document.addEventListenerを使用するデフォルトのJavaScriptコードがいくつかありますが、window.addEventListenerを使用する独自のコードがあります。

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

違いは何ですか、どちらを使用するのが良いですか？

javascripteventsdomevent-listener
114
Charlie

documentとwindowは異なるオブジェクトであり、いくつかの異なるイベントがあります。それらでaddEventListener()を使用すると、別のオブジェクトを宛先とするイベントをリッスンします。興味のあるイベントが実際にあるものを使用する必要があります。

たとえば、windowオブジェクトにはないdocumentオブジェクトに"resize"イベントがあります。

たとえば、"DOMContentLoaded"イベントはdocumentオブジェクトのみにあります。

したがって、基本的には、どのオブジェクトが関心のあるイベントを受け取るかを知り、その特定のオブジェクトで.addEventListener()を使用する必要があります。

以下に、どの種類のオブジェクトがどの種類のイベントを作成するかを示す興味深いグラフを示します。 https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

伝播されたイベント（クリックイベントなど）をリッスンしている場合、ドキュメントオブジェクトまたはウィンドウオブジェクトでそのイベントをリッスンできます。伝播されるイベントの唯一の主な違いは、タイミングです。このイベントは、階層の最初に発生するため、documentオブジェクトの前のwindowオブジェクトにヒットしますが、通常、その違いは重要ではないため、どちらかを選択できます。一般に、伝播されたイベントを処理するときは、ニーズに合ったイベントのソースに最も近いオブジェクトを選択する方が良いと思います。どちらかが機能する場合、documentをwindowよりも選ぶことをお勧めします。しかし、私はしばしばソースにさらに近づき、document.bodyまたはドキュメント内のより近い共通の親（可能であれば）を使用します。

133
jfriend00

JavaScriptには、通常、同じことを実行したり、同じ情報を見つけるためのさまざまな方法があります。この例では、常に存在することが保証されている要素を探しています。 windowとdocumentは両方とも法案に適合します（わずかな違いはあります）。

mozilla dev network から：

addEventListener（）は、単一のターゲットに単一のイベントリスナーを登録します。イベントターゲットは、ドキュメント内の単一の要素、ドキュメント自体、ウィンドウ、またはXMLHttpRequestの場合があります。

そのため、「ターゲット」が常に存在することを期待できる限り、唯一の違いはどのイベントをリッスンしているかだけなので、お気に入りを使用するだけです。

5
Bryan Wolfford