jquery如何添加浏览器大小改变触发事件

发布时间：2022-01-14 13:12:45 作者：柒染
来源：亿速云阅读：188

# jQuery如何添加浏览器大小改变触发事件

在现代Web开发中，响应式设计已成为标配需求。当浏览器窗口大小发生变化时，页面布局需要动态调整以适应不同尺寸。jQuery作为广泛使用的JavaScript库，提供了便捷的方法来监听和响应浏览器窗口大小变化事件。本文将详细介绍如何使用jQuery实现这一功能。

## 一、基础事件绑定方法

### 1. `resize()` 方法
jQuery提供了专门的`resize()`方法来监听浏览器窗口大小变化：

```javascript
$(window).resize(function() {
    console.log('窗口大小已改变');
    // 在此处添加响应代码
});

2. `on()` 方法

更通用的方式是使用on()方法绑定resize事件：

$(window).on('resize', function() {
    // 响应逻辑
});

二、实际应用场景

1. 响应式布局调整

$(window).resize(function() {
    if ($(window).width() < 768) {
        $('.sidebar').hide();
    } else {
        $('.sidebar').show();
    }
});

2. 图表重绘

当使用ECharts等图表库时，需要在窗口变化时重绘图表：

var myChart = echarts.init(document.getElementById('chart'));
$(window).resize(function() {
    myChart.resize();
});

三、性能优化技巧

1. 函数节流(Throttle)

频繁触发resize事件会导致性能问题，应使用节流技术：

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        // 实际执行的代码
    }, 250); // 250ms延迟
});

2. 条件执行

var lastWidth = $(window).width();
$(window).resize(function() {
    var currentWidth = $(window).width();
    if (Math.abs(lastWidth - currentWidth) > 50) { // 宽度变化超过50px才执行
        lastWidth = currentWidth;
        // 执行代码
    }
});

四、高级用法

1. 自定义事件触发

$(window).resize(function() {
    if ($(window).width() > 1200) {
        $(document).trigger('largeScreen');
    }
});

$(document).on('largeScreen', function() {
    // 大屏幕专属逻辑
});

2. 结合CSS媒体查询

function checkBreakpoint() {
    if (window.matchMedia('(max-width: 600px)').matches) {
        // 移动端逻辑
    }
}
$(window).resize(checkBreakpoint);

五、注意事项

移动端兼容性：在移动设备上，浏览器窗口大小变化可能伴随方向改变事件

初始状态：页面加载时应立即检查一次窗口大小


$(document).ready(function() {
   $(window).trigger('resize');
});

事件解绑：不需要时应及时解绑事件
```
$(window).off('resize');
```

六、完整示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .responsive-box {
            width: 100%;
            height: 200px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="responsive-box" id="targetBox"></div>
    
    <script>
        $(document).ready(function() {
            function handleResize() {
                var width = $(window).width();
                $('#targetBox').text('当前宽度: ' + width + 'px');
                
                if (width < 600) {
                    $('#targetBox').css('background-color', '#ffcccc');
                } else if (width < 900) {
                    $('#targetBox').css('background-color', '#ccffcc');
                } else {
                    $('#targetBox').css('background-color', '#ccccff');
                }
            }
            
            // 初始执行
            handleResize();
            
            // 绑定事件
            $(window).resize(function() {
                setTimeout(handleResize, 100); // 100ms延迟节流
            });
        });
    </script>
</body>
</html>

通过以上方法，开发者可以轻松实现浏览器窗口大小变化的响应式处理。合理使用这些技术可以显著提升用户体验，特别是在多设备访问的现代Web环境中。 “`