Window: resize イベント

resize イベントは、この文書のビュー (ウィンドウ) の大きさが変更されたときに発行されます。

バブリング なし
キャンセル 不可
インターフェイス UIEvent
イベントハンドラープロパティ onresize

一部の初期のブラウザーでは、 resize イベントのハンドラーをすべての HTML 要素に設定することができました。現在でも onresize 属性や addEventListener() を使用して、どの要素にもハンドラーを設定することができます。しかし、 resize イベントは window オブジェクト (すなわち document.defaultView で返されるもの) でのみ発行されます。 window オブジェクトに登録されたハンドラーのみが、 resize イベントを受け取ります。

すべての要素が大きさの変更を通知できるようにする提案があります。 Resize Observer で草稿のドキュメントを、 GitHub issue で進行中の議論を読むことができます。

例

ウィンドウの大きさのログ出力

以下の例では、ウィンドウの大きさが変更されるたびに報告を出力します。この例は <iframe> 内で実行されているので、効果を見る前に実際に <iframe> の大きさを変更する必要があることを覚えておいてください。

html
<p>
  ブラウザーウィンドウを変更すると <code>resize</code> イベントを発行します。
</p>
<p>ウィンドウの高さ: <span id="height"></span></p>
<p>ウィンドウの幅: <span id="width"></span></p>
js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

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

window.onresize = reportWindowSize;

addEventListener による同等の実装

イベントハンドラーを設定するために addEventListener() メソッドを使用することもできます。

js
window.addEventListener("resize", reportWindowSize);

仕様書

Specification
CSSOM View Module
# eventdef-window-resize

ブラウザーの互換性

BCD tables only load in the browser

関連情報