SyntaxFix

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

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.

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

Following points should be noted before select window or document to addEventListners

  1. 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.
  2. Since window has the document it is good practice to use document to handle (if it can handle) since event will hit document first.
  3. Internet Explorer doesn't respond to many events registered on the window,so you will need to use document for registering event.

Examples related to javascript

• need to add a class to an element • How to make a variable accessible outside a function? • Hide Signs that Meteor.js was Used • How to create a showdown.js markdown extension • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Summing radio input values • How to execute an action before close metro app WinJS • javascript, for loop defines a dynamic variable name • Getting all files in directory with ajax

Examples related to events

• onKeyDown event not working on divs in React • Detect click outside Angular component • Angular 2 Hover event • Global Events in Angular • How to fire an event when v-model changes? • Passing string parameter in JavaScript function • Capture close event on Bootstrap Modal • AngularJs event to call after content is loaded • Remove All Event Listeners of Specific Type • Jquery .on('scroll') not firing the event while scrolling

Examples related to dom

• How do you set the document title in React? • How to find if element with specific id exists or not • Cannot read property 'style' of undefined -- Uncaught Type Error • adding text to an existing text element in javascript via DOM • Violation Long running JavaScript task took xx ms • How to get `DOM Element` in Angular 2? • Angular2, what is the correct way to disable an anchor element? • React.js: How to append a component on click? • Detect click outside React component • DOM element to corresponding vue.js component

Examples related to event-listener

• What are passive event listeners? • Difference between document.addEventListener and window.addEventListener? • Android: Difference between onInterceptTouchEvent and dispatchTouchEvent?