Окно: событие resize

Событие resize срабатывает, когда размер области просмотра документа (окна) был изменён.

Это событие не может быть отменено и не распространяется.

В некоторых более ранних браузерах было возможно зарегистрировать обработчики событий resize на любом элементе HTML. До сих пор можно задать onresize атрибуты или использовать addEventListener() для задания обработчика на любом элементе. Однако resize события срабатывают только на объекте window (то есть, возвращаемом document.defaultView). Только обработчики, зарегистрированные на объекте window , получат resize события.

Хотя resize событие сейчас срабатывает только для окна, вы можете получать уведомления о изменении размера других элементов с помощью API ResizeObserver.

Если событие resize срабатывает слишком часто для вашего приложения, см. Оптимизация window.onresize для управления временем, через которое срабатывает событие.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("resize", (event) => {});

onresize = (event) => {};

Общее Event.

Следующий пример отображает размер окна каждый раз, когда он изменяется.

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

const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = reportWindowSize;

Результат

Обработчик события можно задать с помощью метода addEventListener():

window.addEventListener("resize", reportWindowSize);