In other words, using window.resize is often wasteful because it informs us of every viewport size change, not just when an element’s size actually changes. This can easily lead to performance problems due to the large amount of triggered event. Up until this point, we’ve had to rely on the global window.resize event to listen for resize events and check if certain elements have changed size. The most frequent reason for an element’s size to change is when the viewport is resized or the device’s direction changes between portrait and landscape. It allows for elements to be notified when their size changes. Resize Observer is a new JavaScript API that’s very similar to other observer APIs like the Intersection Observer API. Get exclusive access to writing opportunities and advice in our community Discord. Or we can use the ResizeObserver constructor to create an object that lets us watch an element for resizing. We can listen to resize events by assigning a resize event listener to the window object. We can select it with document.querySelector. If we want to watch the browser window’s resizing, then we can watch the html element. Then we call ro.observe with the element that we’re watching. Top and left have the x and y coordinates of the top left corner respectively.Įntry.target has the element we’re watching. Width and height have the width and height of the element. We invoke the ResizeObserver constructor with a function that loops through the entries whyich has the items we’re watching.Īnd in the loop body, we get the dimensions from the ntentRect property.

One way to add an event handler for the window resize event is to assign an event handler function to the window.onresize property.įor instance, we can write: window.onresize = (event) => ) ro.observe(document.querySelector('html')) Assign an Event Handler to the window.onresize Property In this article, we’ll look at how to watch the JavaScript window resize event to detect window resizes. We can watch window resize events with JavaScript to detect screen size changes of any kind.

Javascript window resize event