Difference between document.addEventListener and window.addEventListener?

by

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

More Related Contents:

  1. How to find event listeners on a DOM node in JavaScript or in debugging?
  2. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  3. How to stop event propagation with inline onclick attribute?
  4. Firing event on DOM attribute change
  5. Javascript callback when IFRAME is finished loading?
  6. Javascript/DOM: How to remove all event listeners of a DOM object?
  7. Difference between “change” and “input” event for an `input` element
  8. Getting value of HTML Checkbox from onclick/onchange events
  9. HTML “overlay” which allows clicks to fall through to elements behind it [duplicate]
  10. Pass mouse events through absolutely-positioned element
  11. JavaScript: DOM load events, execution sequence, and $(document).ready()
  12. Are event handlers in JavaScript called in order?
  13. jQuery events .load(), .ready(), .unload()
  14. Is it possible to programmatically catch all events on the page in the browser?
  15. How to clone or re-dispatch DOM events?
  16. Unloading/Removing content from an iFrame
  17. Adding Event Listeners on Elements – Javascript
  18. Replacement for deprecated `keypress` DOM event
  19. What’s the difference between event.stopPropagation and event.preventDefault?
  20. How to expose IFrame’s DOM using jQuery?
  21. How can I simulate a click to an anchor tag?
  22. How to handle an ActiveX event in Javascript
  23. change html text from link with jquery
  24. Get the clicked object that triggered jquery blur() event [duplicate]
  25. forEach method of Node.childNodes?
  26. Getting HTML elements by their attribute names
  27. Display DIV at Cursor Position in Textarea [duplicate]
  28. Get immediate first child element
  29. Is there a way to know if a link/script is still pending or has it failed
  30. Removing element with jQuery?

Leave a Comment