resizeイベント：ウィンドウサイズが変更されたとき

resize イベントはブラウザのウィンドウサイズが変更されたときに発生するイベントです。 onresize プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として resize を指定してイベントリスナーを登録できます。ここでは JavaScript を使って resize イベントが発生した場合の処理を記述する方法について解説します。

(Last modified: )

resizeイベントの使い方

resize イベントはページを表示しているブラウザのウィンドウサイズが変更されたときに発生するイベントです。 window オブジェクトで発生します。 

イベントの種類 : UIEvent
バブリングの可否 : 不可
キャンセルの可否 : 不可

※ バブリングについては「イベントの伝搬(キャプチャリングとバブリング)」、キャンセルについては「イベントに対するデフォルトの動作をキャンセルする」を参照されてください。

window オブジェクトのプロパティにイベントハンドラを登録する場合は onresize プロパティを使用します。プロパティを使用する場合は、無名関数またはアロー関数式を使って記述することもできます。(詳しくは「イベントハンドラを無名関数やアロー関数を使って記述する」を参照されてください)。 

onresize プロパティ

<script>
function resizeWindow(){
    console.log('Resize');
}

window.onresize = resizeWindow;
</script>

addEventListener メソッドを使ってイベントリスナーを登録する場合は、 1 番目の引数に 'resize' を指定してください。 addEventListener メソッドを使用する場合は、無名関数またはアロー関数式を使って記述することもできます。(詳しくは「addEventListenerメソッドを使ってイベントリスナーを登録する」を参照されてください)。 

addEventListener メソッド

<script>
function resizeWindow(){
    console.log('Resize');
}

window.addEventListener('resize', resizeWindow);
</script>

要素に対してプロパティへイベントハンドラを登録した場合と、 addEventListener メソッドを使ってイベントリスナーを登録した場合、イベントが発生してイベントハンドラやイベントリスナーが呼び出されるとき、引数として発生したイベントに関する情報が含まれる Event オブジェクトが渡されてきます。 load イベントの場合は UIEvent オブジェクトが渡されてきます。 

<script>
function resizeWindow(event){
    console.log(event);
}

window.addEventListener('resize', resizeWindow);
</script>

イベントハンドラやイベントリスナーの中で渡されてきた Event オブジェクトのプロパティなどを参照することで、発生したイベントに関する情報を参照できます。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<p>ウィンドウのリサイズ</p>

<p id="wsize">width</p>
<p id="hsize">height</p>

<script>
function resizeWindow(event){
    pw.innerText = 'width:' + window.innerWidth + 'px';
    ph.innerText = 'height:' + window.innerHeight + 'px';
}

let pw = document.getElementById('wsize');
let ph = document.getElementById('hsize');

pw.innerText = 'width:' + window.innerWidth + 'px';
ph.innerText = 'height:' + window.innerHeight + 'px';

window.addEventListener('resize', resizeWindow);
</script>

</body>
</html>

ウィンドウのサイズが変更されるたびに resize イベントが発生し、変更後のウィンドウのサイズを取得してページ内に設置した p 要素に対してウィンドウの幅と高さ表示しています。

resizeイベントの使い方(1)

resizeイベントの使い方(2)

bodyタグのonresize属性を使う

body タグの onresize 属性にイベントハンドラを登録することで、 window オブジェクトの resize イベントと同じようにウィンドウのサイズが変更されるとイベントハンドラが呼び出されます。 

onresize 属性

<head>
<script>
function resizeWindow(){
    console.log('Resize');
}
</script>
</head>
<body onresize = resizeWindow()>
・・・
</body>

window オブジェクトの onresize プロパティと body タグの onresize 属性の両方にイベントハンドラを登録した場合、あとから登録された方のイベントハンドラのみ呼び出されるのでこの二つは内部的には同じものと考えられます。(イベントリスナーと異なりイベントハンドラは一つしか登録できず、複数登録した場合は最後に登録したものが有効となるため)。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>

<script>
function resizeWindow(){
    let pw = document.getElementById('wsize');
    let ph = document.getElementById('hsize');

    pw.innerText = 'width:' + window.innerWidth + 'px';
    ph.innerText = 'height:' + window.innerHeight + 'px';
}
</script>

</head>
<body onresize = resizeWindow()>

<p>ウィンドウのリサイズ</p>

<p id="wsize">width</p>
<p id="hsize">height</p>

</body>
</html>

ウィンドウのサイズが変更されるたびに resize イベントが発生し、変更後のウィンドウのサイズを取得してページ内に設置した p 要素に対してウィンドウの幅と高さ表示しています。

bodyタグのonresize属性を使う(1)

bodyタグのonresize属性を使う(2)

-- --

JavaScript を使って resize イベントが発生した場合の処理を記述する方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。