window.resize事件仅触发一次[复制]

问题背景

window.resize事件是JavaScript中的一个事件，当浏览器窗口的大小发生变化时触发。然而，有时候开发者可能会发现这个事件只触发了一次。

基础概念

事件监听器：在JavaScript中，事件监听器是用于监听特定事件并执行相应代码的对象。
事件触发：当某个条件满足时，事件被触发，相应的事件监听器会执行绑定的代码。

可能的原因

事件监听器未正确绑定：可能是在绑定事件监听器时出现了错误，导致事件没有被正确监听。
浏览器缓存：某些浏览器可能会缓存JavaScript文件，导致事件监听器没有被重新绑定。
代码执行顺序：如果事件监听器在窗口大小变化之后才被绑定，那么它将不会捕获之前的变化。

解决方法

1. 确保事件监听器正确绑定

确保在DOM加载完成后绑定事件监听器。可以使用DOMContentLoaded事件来确保DOM已经加载完成。

document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('resize', function() {
        console.log('Window resized!');
    });
});

2. 清除浏览器缓存

清除浏览器缓存或使用无痕模式来确保JavaScript文件是最新的。

3. 检查代码执行顺序

确保事件监听器在窗口大小变化之前就已经绑定。

window.addEventListener('resize', function() {
    console.log('Window resized!');
});

示例代码

以下是一个完整的示例，展示了如何正确绑定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>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window.addEventListener('resize', function() {
                console.log('Window resized!');
            });
        });
    </script>
</body>
</html>