深入理解onresize事件

一、onresize事件概述

onresize事件是指當窗口或框架的大小發生變化時觸發的事件。它可以應用於任何元素上，但通常用於window對象。

onresize事件的使用可以幫助我們在頁面大小發生變化時做出響應，重新計算元素尺寸、調整布局等。

二、onresize事件用法

我們可以使用onresize事件來監聽窗口大小變化。以下是一個監聽窗口變化並輸出窗口大小的例子：

window.onresize = function() {
  console.log(window.innerWidth, window.innerHeight);
}

上述代碼中，我們使用了window.innerWidth和window.innerHeight來獲取窗口的寬度和高度。

另外，我們還可以使用DOM API獲取元素的寬度和高度，例如：

var element = document.getElementById("myElement");
window.onresize = function() {
  console.log(element.offsetWidth, element.offsetHeight);
}

三、onresize事件的應用

1、響應式布局

響應式布局是指通過使用CSS媒體查詢等技術調整布局以適應不同的設備屏幕大小。

使用onresize事件，我們可以在窗口大小變化時重新計算元素大小和位置，並實現響應式布局。

window.onresize = function() {
  var element = document.getElementById("myElement");
  var width = window.innerWidth;
  if (width < 768) {
    element.style.width = "100%";
  } else if (width < 992) {
    element.style.width = "50%";
  } else {
    element.style.width = "30%";
  }
}

上述代碼中，我們在窗口大小變化時重新計算元素寬度，並根據窗口寬度設置元素的不同寬度。

2、圖片展示

在圖片展示應用中，我們可以根據窗口大小選擇不同的圖片或者縮放圖片大小以適應窗口大小。

以下是一個根據窗口大小選擇不同圖片的例子：

var smallImg = "smallImg.jpg";
var largeImg = "largeImg.jpg";
var imgElement = document.getElementById("myImg");
window.onresize = function() {
  var width = window.innerWidth;
  if (width < 768) {
    imgElement.src = smallImg;
  } else {
    imgElement.src = largeImg;
  }
}

上述代碼中，我們在窗口大小變化時重新選擇圖片，並賦值給img元素的src屬性。

四、onresize事件的注意事項

由於onresize事件是頻繁觸發的事件，建議在使用onresize事件時加上節流或防抖等優化策略，減少不必要的計算和操作。

五、總結

onresize事件是一個重要的事件，可以幫助我們實現響應式布局、圖片展示等應用。在使用onresize事件時需要注意其頻繁觸發的特點，並加以優化。