windowaddEventListenerhashchange

window.addEventListener is a method of the Window interface used in web browsers to register event listeners for events that occur on the window or document. It allows multiple listeners for the same event type and enables control over how events propagate through the capture and bubble phases.

The basic syntax is window.addEventListener(type, listener, options). Type is a string such as 'load', 'resize', 'scroll', or 'click'. Listener is a function or an object with a handleEvent method. The third parameter, options, can be either a boolean (legacy useCapture) or an object that may include capture, once, and passive. The capture flag determines whether the listener should be invoked during the capture phase (true) or the bubbling phase (false). By default, listeners run in the bubbling phase.

The once option, if set to true, automatically removes the listener after its first invocation. The passive option, when true, signals that the listener will not call preventDefault on the event, which can improve scrolling performance on touch and wheel events.

Removal of a listener is done with window.removeEventListener(type, listener, options). It is important to pass the same type, listener reference, and capture/passive options used when adding the listener; otherwise, removal may fail. Maintaining a reference to the listener function is common practice to enable proper cleanup, especially in single-page applications.

Common use cases include responding to window resize, load, or beforeunload events, and coordinating cleanup when components unmount or pages navigate away. Developers should consider performance implications by using appropriate options and, where needed, throttling or debouncing for high-frequency events.