From 30fb9724b0fd22958d48a33f0e294e0b791bed6f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 30 Jul 2021 12:02:02 +0900 Subject: Web/API/Window/resize_event を新規翻訳 (#1562) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/06/17時点の英語版に基づき新規翻訳 --- files/ja/web/api/window/resize_event/index.html | 82 +++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 files/ja/web/api/window/resize_event/index.html diff --git a/files/ja/web/api/window/resize_event/index.html b/files/ja/web/api/window/resize_event/index.html new file mode 100644 index 0000000000..bcb4279c29 --- /dev/null +++ b/files/ja/web/api/window/resize_event/index.html @@ -0,0 +1,82 @@ +--- +title: 'Window: resize イベント' +slug: Web/API/Window/resize_event +tags: + - API + - Reference + - Web + - Window + - events + - resize +browser-compat: api.Window.resize_event +--- +
{{APIRef}}
+ +

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

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("UIEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onresize", "onresize")}}
+ +

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

+ +

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

+ +

例

+ +

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

+ +

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

+ +
<p>ブラウザーウィンドウを変更すると <code>resize</code> イベントを発行します。</p>
+<p>ウィンドウの高さ: <span id="height"></span></p>
+<p>ウィンドウの幅: <span id="width"></span></p>
+ +
const heightOutput = document.querySelector('#height');
+const widthOutput = document.querySelector('#width');
+
+function reportWindowSize() {
+  heightOutput.textContent = window.innerHeight;
+  widthOutput.textContent = window.innerWidth;
+}
+
+window.onresize = reportWindowSize;
+ +

{{EmbedLiveSample("Window_size_logger")}}

+ +

addEventListener による同等の実装

+ +

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

+ +
window.addEventListener('resize', reportWindowSize);
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf