异常教程

onresize 事件（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，浏览器窗口的大小变化是一个常见的用户交互行为。无论是调整浏览器窗口的尺寸，还是在移动设备上切换横竖屏模式，这些操作都会触发 onresize 事件。这个事件就像一位“窗口管理员”，时刻监控着浏览器窗口的尺寸变化，并根据开发者预设的逻辑执行相应的操作。

对编程初学者来说，理解事件驱动的机制可能有些抽象。不妨将浏览器窗口想象成一个动态的舞台，而 onresize 事件则是舞台管理员——当舞台（窗口）的大小发生变化时，它会立即通知开发者，以便调整布局或内容，确保用户体验始终流畅。

如何触发 onresize 事件

onresize 事件的触发条件非常明确：只要浏览器窗口的尺寸发生改变，事件就会被激活。例如：

  • 用户拖动浏览器窗口的边框来放大或缩小窗口；
  • 在移动设备上切换屏幕方向（从竖屏变为横屏）；
  • 浏览器标签被最小化或恢复。

示例代码：基础触发与监听

通过以下代码，可以直观地观察到 onresize 事件的触发过程：

window.addEventListener('resize', function() {
  console.log('窗口大小已改变！当前宽度:', window.innerWidth, '高度:', window.innerHeight);
});

当用户调整窗口大小时，控制台会持续输出最新的窗口尺寸数据。

onresize 事件的核心应用场景

1. 响应式布局的动态调整

网页的响应式设计是现代开发的核心需求之一。onresize 事件允许开发者在窗口变化时，动态调整元素的位置、大小或可见性。

案例：自适应导航栏
假设需要实现一个导航栏，在窗口宽度小于 768 像素时隐藏，反之则显示。代码逻辑如下：

function adjustNavbar() {
  const navbar = document.querySelector('.navbar');
  if (window.innerWidth < 768) {
    navbar.style.display = 'none';
  } else {
    navbar.style.display = 'flex';
  }
}

// 初始加载时执行一次
adjustNavbar();

// 监听窗口变化
window.addEventListener('resize', adjustNavbar);

2. 图片或视频的自适应缩放

图片或视频的尺寸需要根据窗口大小动态调整，避免出现拉伸或溢出的问题。

function scaleMedia() {
  const mediaElement = document.getElementById('responsive-media');
  mediaElement.style.width = `${window.innerWidth * 0.8}px`; // 设置为窗口宽度的 80%
  mediaElement.style.height = 'auto';
}

window.addEventListener('resize', scaleMedia);

3. 动态内容加载与卸载

在大型应用中，当窗口过小可能导致性能问题时，可以通过 onresize 事件卸载非必要内容，或加载适配的小屏版本。

事件监听的实现方式与注意事项

1. 监听器的添加与移除

开发者可以通过 addEventListener 和 removeEventListener 方法来管理 onresize 事件的监听。

// 添加监听器
const handler = function() { /* 逻辑代码 */ };
window.addEventListener('resize', handler);

// 移除监听器（避免内存泄漏）
window.removeEventListener('resize', handler);

注意事项：如果未正确移除监听器，可能会导致内存泄漏。例如，在单页面应用（SPA）中，组件卸载时应确保监听器被移除。

2. 防抖与性能优化

频繁触发 onresize 事件可能引发性能问题。例如，当用户快速拖动窗口边框时，事件会以毫秒级的间隔多次触发，导致代码执行过载。

此时，可以采用 防抖（Debounce） 技术，确保事件在窗口停止变化后一定时间（如 200 毫秒）才执行逻辑：

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

const handleResize = debounce(() => {
  // 具体逻辑
}, 200);

window.addEventListener('resize', handleResize);

3. 窗口尺寸的获取方法

在事件处理函数中，可以通过以下属性获取窗口的实时尺寸：

  • window.innerWidth：视口的宽度（包含滚动条）；
  • window.innerHeight：视口的高度；
  • document.documentElement.clientWidth：排除滚动条的宽度；
  • document.documentElement.clientHeight：排除滚动条的高度。

常见问题与解决方案

1. 事件触发时页面抖动

如果在 onresize 中修改了元素的尺寸或位置，可能导致窗口尺寸再次变化，从而形成无限循环。例如：

// 错误示例：调整窗口宽度时改变元素宽度，导致窗口尺寸再次变化
window.addEventListener('resize', function() {
  const element = document.getElementById('my-element');
  element.style.width = '100%';
});

解决方案：

  • 通过防抖减少触发频率；
  • 确保修改的元素不会直接影响窗口尺寸。

2. 移动端的特殊处理

在移动端，切换横竖屏时，onresize 事件可能不会立即触发，因为浏览器可能需要时间重新计算布局。此时，可以结合 orientationchange 事件进行补充监听。

window.addEventListener('resize', handleScreenChange);
window.addEventListener('orientationchange', handleScreenChange);

3. 兼容性问题

onresize 事件在主流浏览器中均良好支持，但需注意：

  • 在旧版 IE 浏览器中，需使用 window.onresize = function() {} 的语法；
  • 服务端渲染（SSR）环境中，需确保代码在客户端执行。

进阶技巧：结合 CSS Media Queries

虽然 onresize 事件能直接操作 DOM，但结合 CSS 的 @media 查询可以更高效地实现响应式设计。例如：

/* CSS 响应式布局 */
.navbar {
  display: flex;
}

@media (max-width: 767px) {
  .navbar {
    display: none;
  }
}

此时，JavaScript 可以专注于更复杂的逻辑，如动态计算元素位置或与后端交互。

总结与实践建议

onresize 事件是网页开发中不可或缺的工具，尤其在构建自适应和动态交互的网页时。通过合理使用防抖、监听器管理及 CSS 响应式设计，开发者可以高效地实现流畅的用户体验。

实践建议：

  1. 从简单案例开始，如调整元素尺寸或隐藏/显示组件；
  2. 使用开发者工具的“设备模式”模拟不同屏幕尺寸；
  3. 结合性能分析工具（如 Chrome DevTools）优化代码效率。

掌握 onresize 事件，不仅能提升代码的灵活性，更能帮助开发者更好地应对复杂场景下的布局挑战。

最新发布

查看更多文章