JS window事件详解|极客笔记

JS window事件详解

概述

在浏览器中，我们可以通过JavaScript来控制窗口的事件。通过监听窗口的各种事件，我们可以实现一些交互和动态效果。本文将主要介绍在JavaScript中如何使用window对象来监听和处理窗口事件。

window对象

在浏览器中，window对象代表浏览器的一个窗口或一个标签页。通过window对象，我们可以访问和控制浏览器窗口的各种属性和方法。window对象是JavaScript中的全局对象，所以我们可以直接通过window来访问它的属性和方法。

window事件

在JavaScript中，window对象提供了一系列事件，用于监听浏览器窗口的各种状态改变。常用的window事件包括resize事件、scroll事件、load事件等。通过监听这些事件，我们可以实现对窗口大小变化、滚动、页面加载等行为的响应。

resize事件

resize事件会在浏览器窗口大小改变时触发。我们可以通过监听resize事件来实现对窗口大小变化的响应。

window.addEventListener('resize', function() {
    console.log('窗口大小发生变化');
});

scroll事件

scroll事件会在页面滚动时触发。我们可以通过监听scroll事件来实现对页面滚动的响应。

window.addEventListener('scroll', function() {
    console.log('页面滚动了');
});

load事件

load事件会在页面加载完成后触发。我们可以通过监听load事件来执行一些初始化操作。

window.addEventListener('load', function() {
    console.log('页面加载完成');
});

beforeunload事件

beforeunload事件会在用户关闭页面或导航离开页面前触发。我们可以通过监听beforeunload事件来提示用户是否保存未提交的数据。

window.addEventListener('beforeunload', function(event) {
    event.returnValue = '你确定要离开页面吗？';
});

focus和blur事件

focus事件会在窗口获得焦点时触发，而blur事件会在窗口失去焦点时触发。

window.addEventListener('focus', function() {
    console.log('窗口获得了焦点');
});

window.addEventListener('blur', function() {
    console.log('窗口失去了焦点');
});

示例

接下来，我们通过一个简单的示例来演示如何在JavaScript中监听window事件：

<!DOCTYPE html>
<html>
<head>
    <title>Window事件示例</title>
</head>
<body>
    <h1>窗口事件示例</h1>
    <p>请尝试改变窗口大小或滚动页面</p>
    <script>
        window.addEventListener('resize', function() {
            console.log('窗口大小发生变化');
        });

        window.addEventListener('scroll', function() {
            console.log('页面滚动了');
        });

        window.addEventListener('load', function() {
            console.log('页面加载完成');
        });
    </script>
</body>
</html>

在上面的示例中，我们在页面加载时分别添加了resize、scroll和load事件的监听器。在浏览器中打开这个页面后，可以尝试改变窗口大小或滚动页面，观察控制台中的输出。