Difference between document addEventListener and window addEventListener

Question

While using PhoneGap  it has some default JavaScript code that uses document addEventListener  but I have my own code which uses window addEventListener   function onBodyLoad        document addEventListener  deviceready   onDeviceReady  false       document addEventListener  touchmove   preventBehavior  false       window addEventListener  shake   shakeEventDidOccur  false       What is the difference and which is better to use

User · Answer

You ll find that in javascript  there are usually many different ways to do the same thing or find the same information  In your example  you are looking for some element that is guaranteed to always exist  window and document both fit the bill  with just a few differences    From mozilla dev network      addEventListener   registers a single event listener on a single   target  The event target may be a single element in a document  the   document itself  a window  or an XMLHttpRequest    So as long as you can count on your  target  always being there  the only difference is what events you re listening for  so just use your favorite

User · Answer

The document and window are different objects and they have some different events   Using addEventListener   on them listens to events destined for a different object   You should use the one that actually has the event you are interested in   For example  there is a  resize  event on the window object that is not on the document object   For example  the  DOMContentLoaded  event is only on the document object   So basically  you need to know which object receives the event you are interested in and use  addEventListener   on that particular object   Here s an interesting chart that shows which types of objects create which types of events  https   developer mozilla org en-US docs DOM DOM event reference    If you are listening to a propagated event  such as the click event   then you can listen for that event on either the document object or the window object   The only main difference for propagated events is in timing   The event will hit the document object before the window object since it occurs first in the hierarchy  but that difference is usually immaterial so you can pick either   I find it generally better to pick the closest object to the source of the event that meets your needs when handling propagated events   That would suggest that you pick document over window when either will work   But  I d often move even closer to the source and use document body or even some closer common parent in the document  if possible

User · Answer

The window binding refers to a built-in object provided by the browser  It represents the browser window that contains the document  Calling its addEventListener method registers the second argument  callback function  to be called whenever the event described by its first argument occurs    lt p gt Some paragraph  lt  p gt   lt script gt    window addEventListener  click        gt        console log  Test           lt  script gt    Following points should be noted before select window or document to addEventListners   Most of the events are same for window or document but some events like resize  and other events related to loading  unloading  and opening closing should all be set on the window  Since window has the document it is good practice to use document to     handle  if it can handle  since event will hit document first  Internet Explorer doesn t respond to many events registered on the     window so you will need to use document for registering event

[javascript] Difference between document.addEventListener and window.addEventListener?

Examples related to javascript

Examples related to events

Examples related to dom

Examples related to event-listener