Window: resize event
The resize
event fires when the document view (window) has been resized.
This event is not cancelable and does not bubble.
In some earlier browsers it was possible to register resize
event handlers on any HTML element. It is still possible to set onresize
attributes or use addEventListener()
to set a handler on any element. However, resize
events are only fired on the window
object (i.e. returned by document.defaultView
). Only handlers registered on the window
object will receive resize
events.
While the resize
event fires only for the window nowadays, you can get resize notifications for other elements using the ResizeObserver API.
If the resize event is triggered too many times for your application, see Optimizing window.onresize to control the time after which the event fires.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("resize", (event) => {});
onresize = (event) => {};
Event type
Event properties
This interface also inherits properties of its parent, Event
.
UIEvent.detail
Read only-
Returns a
long
with details about the event, depending on the event type. UIEvent.sourceCapabilities
Experimental Read only-
Returns an instance of the
InputDeviceCapabilities
interface, which provides information about the physical device responsible for generating a touch event. UIEvent.view
Read only-
Returns a WindowProxy that contains the view that generated the event.
UIEvent.which
Deprecated Non-standard Read only-
Returns the numeric
keyCode
of the key pressed, or the character code (charCode
) for an alphanumeric key pressed.
Examples
Window size logger
The following example reports the window size each time it is resized.
HTML
html
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
JavaScript
js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");
function reportWindowSize() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
window.onresize = reportWindowSize;
Result
Note: The example output here is in an <iframe>
, so the reported width and height values are for the <iframe>
, not the window that this page is in. In particular, it will be hard to adjust the window size so as to see a difference in the reported height.
The effect is easier to see if you view the example in its own window.
addEventListener equivalent
You could set up the event handler using the addEventListener()
method:
js
window.addEventListener("resize", reportWindowSize);
Specifications
Specification |
---|
CSSOM View Module # resizing-viewports |
Browser compatibility
BCD tables only load in the browser