Perbedaan antara document.addEventListener dan window.addEventListener?

135

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?

javascript events dom event-listener Charlie
sumber

Jawaban:

160

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).

pacar00
sumber
Saya ingin tahu tentang "menggelegak ke dokumen tetapi tidak ke jendela". Jadi saya mengujinya di sini -> jsfiddle.net/k3qv9/1 Apakah saya kehilangan sesuatu atau apakah gelembung benar-benar terjadi?
banzomaikaka
1
@JOPLOmacedo - sebelum komentar Anda, saya menghapus bagian tentang menggelegak karena saya tidak yakin peristiwa mana yang muncul ke jendela dan mana yang tidak. Protokol yang selalu saya lihat adalah untuk mencegat berbagai peristiwa menggelegak dokumen di document.bodyobjek atau documentobjek sehingga tidak ada alasan untuk digunakan windowuntuk acara bergelembung . Bagaimanapun, inti dari jawaban saya adalah bahwa beberapa peristiwa hanya aktif windowdan beberapa peristiwa hanya aktif documentdan beberapa pada keduanya sehingga OP harus memilih objek yang sesuai dengan acara yang ingin mereka tangani.
jfriend00
Oke dokey. Itulah yang biasanya saya lakukan juga - persis mengapa saya memutuskan untuk mengujinya. Terima kasih atas jawabannya!
banzomaikaka
Karena 'klik' acara tersedia di kedua dokumen dan jendela dan jika kita mendaftarkan acara di kedua dokumen dan jendela maka penangan klik dokumen api pertama kemudian jendela. jadi untuk sudut pandang ini pilihan dokumen lebih baik. jsfiddle.net/3LcVw
coder
1
Contoh lain: Jika Anda akan menambahkan addEventListener("keydown", event)melalui windowuntuk TV Samsung, maka itu tidak akan berhasil. Tetapi Anda akan melakukan hal yang sama dengan itu document, maka itu akan terjadi. Tergantung juga pada perangkat tertentu bagaimana hal itu disebut peristiwa bergelembung.
Jakub Kubista
4

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.

Bryan Wolfford
sumber
5
Secara umum ini tidak benar. Peristiwa yang berbeda terjadi pada objek yang berbeda. documentdan windowtidak menerima acara yang sama. Anda harus memilih objek yang membuat acara yang Anda minati. Beberapa acara mungkin ditujukan untuk keduanya documentdan window, tetapi tidak semua.
jfriend00
1

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.
Pelanggan
sumber