Perbedaan antara document.addEventListener dan window.addEventListener?

Saat menggunakan PhoneGap, ia memiliki beberapa kode JavaScript default yang digunakan document.addEventListener, tetapi saya memiliki kode sendiri yang menggunakan window.addEventListener:

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

Apa perbedaannya dan mana yang lebih baik untuk digunakan?

The documentdan windowyang objek yang berbeda dan mereka memiliki beberapa acara yang berbeda. Menggunakan addEventListener()mereka mendengarkan acara yang ditujukan untuk objek yang berbeda. Anda harus menggunakan salah satu yang benar-benar memiliki acara yang Anda minati.

Misalnya, ada "resize"acara di windowobjek yang tidak ada di documentobjek.

Misalnya, "DOMContentLoaded"acara hanya pada documentobjek.

Jadi pada dasarnya, Anda perlu tahu objek mana yang menerima peristiwa yang Anda minati dan gunakan .addEventListener()pada objek tertentu.

Berikut adalah bagan menarik yang menunjukkan jenis objek yang membuat jenis peristiwa mana: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

Jika Anda mendengarkan acara yang disebarkan (seperti acara klik), maka Anda dapat mendengarkan acara itu di objek dokumen atau objek jendela. Satu-satunya perbedaan utama untuk acara yang diperbanyak adalah dalam hal waktu. Acara akan mengenai documentobjek sebelum windowobjek karena terjadi pertama kali dalam hierarki, tetapi perbedaan itu biasanya tidak penting sehingga Anda dapat memilih salah satunya. Saya merasa umumnya lebih baik untuk memilih objek terdekat ke sumber acara yang memenuhi kebutuhan Anda saat menangani acara yang diperbanyak. Itu akan menunjukkan bahwa Anda memilih documentlebih windowketika salah akan bekerja. Tetapi, saya sering berpindah lebih dekat ke sumber dan menggunakan document.bodyatau bahkan beberapa orang tua yang lebih dekat dalam dokumen (jika mungkin).

Anda akan menemukan bahwa dalam javascript, biasanya ada banyak cara berbeda untuk melakukan hal yang sama atau menemukan informasi yang sama. Dalam contoh Anda, Anda mencari beberapa elemen yang dijamin selalu ada. windowdan documentkeduanya sesuai dengan tagihan (dengan hanya beberapa perbedaan).

Dari jaringan dev mozilla :

addEventListener () mendaftarkan pendengar acara tunggal pada satu target. Target acara dapat berupa elemen tunggal dalam dokumen, dokumen itu sendiri, jendela, atau XMLHttpRequest.

Jadi, selama Anda dapat mengandalkan "target" Anda selalu ada, satu-satunya perbedaan adalah acara apa yang Anda dengarkan, jadi gunakan saja favorit Anda.

The windowmengikat mengacu pada built-in objek yang disediakan oleh browser. Ini mewakili jendela browser yang berisi document. Memanggil addEventListenermetodenya mendaftarkan argumen kedua (fungsi panggilan balik) untuk dipanggil setiap kali peristiwa yang dijelaskan oleh argumen pertama terjadi.

<p>Some paragraph.</p>
<script>
  window.addEventListener("click", () => {
    console.log("Test");
  });
</script>

Poin-poin berikut harus dicatat sebelum pilih jendela atau dokumen untuk menambahkanEventListners

1. Sebagian besar peristiwa yang sama untuk windowatau documenttetapi beberapa peristiwa seperti resize, dan acara lainnya yang berhubungan dengan loading, unloadingdan opening/closingsemua harus diatur pada jendela.
2. Karena jendela memiliki dokumen, praktik yang baik untuk menggunakan dokumen untuk menangani (jika dapat menangani) karena acara akan mengenai dokumen terlebih dahulu.
3. Internet Explorer tidak menanggapi banyak acara yang terdaftar di jendela, jadi Anda harus menggunakan dokumen untuk mendaftar acara.