resize事件监听

在Web开发中，resize事件是指当浏览器窗口大小发生改变时，会触发的一个JavaScript事件。这个事件常用于响应用户的屏幕调整，以便动态调整网页布局、图片尺寸等以适应新的视口大小。以下是监听resize事件的基本步骤：

1. **绑定事件监听器**：首先，你需要获取到需要监听窗口变化的元素，通常是window对象，然后使用`addEventListener`方法来注册resize事件：

window.addEventListener('resize', function(event) {
  // 事件处理逻辑
});

2. **事件处理函数**：在这个函数中，你可以编写处理窗口变化的代码。比如，检查窗口的新宽度和高度，然后根据需求更新元素样式、调整页面布局：

function onResize() {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;
  
  // 根据新尺寸进行相应的调整
  yourElement.style.width = `${newWidth}px`;
  yourElement.style.height = `${newHeight}px`;
}

3. **事件触发**：每次窗口大小发生变化时，都会触发一次resize事件，所以只要窗口还在调整，处理函数就会持续执行。

请注意，由于resize事件比较频繁，因此如果不需要实时响应，可以设置一个合适的延迟，比如在事件处理器内部使用`setTimeout`来延迟执行调整操作，以减少不必要的计算。