HOME
JavaScript でプログラミングを始められる方を対象とした JavaScript 入門です。JavaScript におけるプログラムの記述方法をサンプルコードと一緒に学習します。
resize
イベントは、ブラウザのウィンドウサイズが変更されたときに発生します。
window.addEventListener("resize", function(event) {
console.log("ブラウザのウィンドウサイズが変更されました");
});
resize
イベントwindow.onresize
プロパティでも上記と同様の処理を実装できます。
function resize() {
console.log("ブラウザのウィンドウサイズが変更されました");
}
window.onresize = resize;
window.onresize
プロパティresize
イベントや window.onresize
プロパティは、高頻度で発生する可能性があるため、イベントハンドラーは DOM の変更などの計算負荷の高い操作を実行しないでください。対策手段として、リサイズ後に処理を行うなどの方法があります。下記の例では、リサイズの1秒後にタイマーを設置しておき、リサイズのイベント毎にタイマーを解除する仕組みを実装しています。このような方法では、リサイズが1秒以上行われなかったときのみ、リサイズ後の処理が実行されます。
var resizeTimer;
window.addEventListener('resize', function (event) {
if (!resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function () {
onResize();
}, 1000);
});
// リサイズ後の処理
function onResize(){}
resize
イベント