窗口事件 - resize 事件 - 窗口大小改变事件

在前端开发中，用户与网页的交互方式多种多样，其中窗口大小的改变是一个常见且重要的交互场景。JavaScript 提供了 resize 事件，让开发者能够监听窗口大小的变化，并根据这些变化做出相应的响应，从而提升用户体验。本文将深入探讨 resize 事件，包括其基本概念、使用方法、注意事项以及实用示例。

基本概念

resize 事件是浏览器窗口对象（window）的一个事件，当用户手动调整浏览器窗口的大小，或者在设备的屏幕方向发生改变（如从竖屏切换到横屏）时，该事件就会被触发。通过监听 resize 事件，开发者可以在窗口大小改变时执行自定义的 JavaScript 代码。

使用方法

要监听 resize 事件，只需使用 addEventListener 方法将一个事件处理函数绑定到 window 对象的 resize 事件上。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resize Event Example</title>
</head>
<body>
    <p id="sizeInfo">当前窗口宽度: <span id="width"></span>px，高度: <span id="height"></span>px</p>
    <script>
        const widthSpan = document.getElementById('width');
        const heightSpan = document.getElementById('height');
        // 定义事件处理函数
        function updateWindowSize() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            widthSpan.textContent = width;
            heightSpan.textContent = height;
        }
        // 初始调用，显示当前窗口大小
        updateWindowSize();
        // 监听 resize 事件
        window.addEventListener('resize', updateWindowSize);
    </script>
</body>
</html>

在上述示例中，我们定义了一个 updateWindowSize 函数，用于获取当前窗口的宽度和高度，并将其显示在页面上。然后，我们使用 addEventListener 方法将该函数绑定到 window 对象的 resize 事件上。当窗口大小改变时，updateWindowSize 函数就会被调用，从而更新页面上显示的窗口大小信息。

注意事项

性能问题

resize 事件会在窗口大小改变的过程中频繁触发，尤其是当用户快速拖动窗口边缘时。如果事件处理函数包含复杂的计算或 DOM 操作，可能会导致页面性能下降，出现卡顿现象。为了避免这种情况，可以使用节流（throttle）或防抖（debounce）技术来限制事件处理函数的调用频率。

节流示例

function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        }
    };
}
function updateWindowSize() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    console.log(`当前窗口宽度: ${width}px，高度: ${height}px`);
}
const throttledUpdate = throttle(updateWindowSize, 200);
window.addEventListener('resize', throttledUpdate);

在上述示例中，我们定义了一个 throttle 函数，用于限制 updateWindowSize 函数的调用频率。在 200 毫秒内，无论 resize 事件触发多少次，updateWindowSize 函数只会执行一次。

兼容性问题

resize 事件在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能存在兼容性问题。在使用时，建议进行必要的兼容性测试。

实用示例

响应式布局调整

在响应式设计中，我们经常需要根据窗口大小的变化来调整页面布局。以下是一个简单的示例，当窗口宽度小于 600px 时，将页面中的元素隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout Example</title>
    <style>
        #hiddenElement {
            display: block;
        }
    </style>
</head>
<body>
    <div id="hiddenElement">这是一个在小屏幕下隐藏的元素</div>
    <script>
        const hiddenElement = document.getElementById('hiddenElement');
        function adjustLayout() {
            const width = window.innerWidth;
            if (width < 600) {
                hiddenElement.style.display = 'none';
            } else {
                hiddenElement.style.display = 'block';
            }
        }
        // 初始调用，确保页面加载时布局正确
        adjustLayout();
        // 监听 resize 事件
        window.addEventListener('resize', adjustLayout);
    </script>
</body>
</html>

总结

要点	详情
基本概念	`resize` 事件在窗口大小改变或屏幕方向切换时触发
使用方法	使用 `addEventListener` 绑定事件处理函数到 `window` 对象的 `resize` 事件
注意事项	性能问题：使用节流或防抖技术；兼容性问题：进行必要的兼容性测试
实用示例	响应式布局调整、动态更新图表等

通过合理使用 resize 事件，开发者可以让网页在不同的窗口大小下都能提供良好的用户体验。在实际开发中，要注意性能和兼容性问题，确保代码的稳定性和可靠性。