javascript - Diferența dintre document.addEventListener și window.addEventListener?

În timp ce folosesc PhoneGap, acesta are un cod JavaScript implicit care folosește document.addEventListener, dar eu am propriul meu cod care folosește window.addEventListener:

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

Care este diferența și care este mai bine de folosit?

Răspuns #1

document și window sunt obiecte diferite și ele au câteva evenimente diferite. Folosind addEventListener() pe ele ascultă evenimente destinate unui alt obiect. Ar trebui să folosești pe cel care are efectiv evenimentul care te interesează.

De exemplu, există un eveniment "resize" pe obiectul window care nu există pe obiectul document.

De exemplu, evenimentul "readystatechange" este doar pe obiectul document.

Așadar, practic, trebuie să știi care obiect primește evenimentul care te interesează și să folosești .addEventListener() pe acel obiect particular.

Iată un grafic interesant care arată ce tipuri de obiecte creează ce tipuri de evenimente: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

Dacă asculți un eveniment propagat (cum ar fi evenimentul click), atunci poți asculta acel eveniment fie pe obiectul document, fie pe obiectul window. Singura diferență principală pentru evenimentele propagate este legată de sincronizare. Evenimentul va atinge mai întâi obiectul document înainte de obiectul window, deoarece apare mai întâi în ierarhie, dar această diferență este de obicei nesemnificativă, așa că poți alege oricare dintre ele. În general, consider că este mai bine să alegi obiectul cel mai apropiat de sursa evenimentului care îndeplinește cerințele tale atunci când gestionezi evenimente propagate. Aceasta ar sugera să alegi document în loc de window atunci când ambele funcționează. Totuși, deseori aș merge și mai aproape de sursă și aș folosi document.body sau chiar un părinte comun mai apropiat în document (dacă este posibil).

Răspunsul #2

Legătura window se referă la un obiect încorporat oferit de browser. Reprezintă fereastra browserului care conține document. Apelarea metodei sale addEventListener înregistrează al doilea argument (funcția de callback) pentru a fi apelat ori de câte ori evenimentul descris de primul argument are loc.

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

Următoarele puncte trebuie notate înainte de a selecta fereastra sau documentul pentru addEventListeners

  1. Majoritatea evenimentelor sunt aceleași pentru window sau document, dar unele evenimente precum resize și alte evenimente legate de loading, unloading și opening/closing ar trebui să fie toate setate pe fereastră.
  2. Deoarece fereastra are documentul, este o practică bună să folosești documentul pentru a gestiona (dacă poate gestiona) deoarece evenimentul va ajunge mai întâi la document.
  3. Internet Explorer nu răspunde la multe evenimente înregistrate pe fereastră, așa că va trebui să folosești documentul pentru înregistrarea evenimentului.