JS window.addEventListener 使用方法、参数及5个常见实战案例

window.addEventListener 是 JavaScript 中用于向指定对象（此处为代表浏览器窗口的 window）注册事件监听器的方法，旨在当该对象触发特定事件时执行对应的处理函数。

该方法主要接收以下三个参数：

事件类型（type）：字符串格式，指明需监听的事件种类。例如，"click" 代表鼠标点击事件，"load" 代表页面加载完成事件等。
事件处理函数（listener）：当事件触发时调用的函数。该函数接收一个包含事件详细信息（如触发元素、事件类型等）的事件对象作为参数。
布尔值选项（options/useCapture）（可选）：用于指定事件在捕获阶段还是冒泡阶段执行，默认值为 false，即在冒泡阶段执行。
DOM 事件流遵循先捕获、后目标、再冒泡的顺序。若需让事件在捕获阶段触发，可将此参数设为 true。

示例

以下代码展示了如何使用 window.addEventListener 监听页面加载完成事件：

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

当页面完全加载（包括图片、样式表等资源）后，控制台将输出 "页面加载完成！"。

移除事件监听器

若需移除已添加的监听器，可使用 removeEventListener 方法。需注意，必须提供与添加时完全相同的函数引用，因为 removeEventListener 依赖引用匹配来移除监听器。

注意事项

若对同一事件多次添加同一监听器，所有监听器均会被调用。
通过 addEventListener 添加的监听器，必须使用 removeEventListener 手动移除，否则它们将一直存在于页面中，直到页面卸载。
使用 addEventListener 时，应避免在全局作用域（如直接在 <script> 标签中）定义事件处理函数，以免污染全局命名空间并导致后续难以移除。建议采用函数表达式或箭头函数定义处理函数。

以下是 window.addEventListener 在实际开发中的几个典型应用场景，有助于深入理解其用法。

实例1. 监听页面加载完成事件

页面完全加载（含所有依赖资源如图片、样式表等）后，若需执行初始化操作（如发送统计信息、初始化 UI 组件等），可使用 window.addEventListener 监听 load 事件。

window.addEventListener('load', function() {
    console.log('页面加载完成，可以执行初始化操作了！');
    // 在这里执行初始化操作
});

实例2. 监听窗口大小变化事件

在响应式网页设计中，若需根据窗口大小调整布局或样式，可使用 window.addEventListener 监听 resize 事件。

window.addEventListener('resize', function() {
    console.log('窗口大小发生变化了！');
    // 在这里根据窗口大小调整布局或样式
    // 例如：调整某个元素的宽度为窗口宽度的80%
    document.getElementById('myElement').style.width = window.innerWidth * 0.8 + 'px';
});

实例3. 监听滚动事件

当用户滚动页面时，若需执行特定操作（如显示/隐藏导航栏、加载更多数据等），可使用 window.addEventListener 监听 scroll 事件。

window.addEventListener('scroll', function() {
    console.log('页面正在滚动！');
    // 在这里根据滚动位置执行操作
    // 例如：当滚动到一定位置时显示“返回顶部”按钮
    if (window.scrollY > 100) {
        document.getElementById('backToTop').style.display = 'block';
    } else {
        document.getElementById('backToTop').style.display = 'none';
    }
});

实例4. 监听在线/离线状态变化

开发涉及网络状态处理的应用时，若需知晓用户在线状态，可使用 window.addEventListener 监听 online 和 offline 事件。

window.addEventListener('online', function() {
    console.log('用户已在线！');
    // 在这里执行在线时需要的操作
});
window.addEventListener('offline', function() {
    console.log('用户已离线！');
    // 在这里执行离线时需要的操作
});

实例5. 监听键盘事件

尽管 window.addEventListener 通常用于监听与窗口相关的事件，但也可用于监听键盘事件，如 keydown、keyup 等。更常见的做法是将监听器绑定到具体元素，但此处演示如何在 window 上监听键盘事件。

window.addEventListener('keydown', function(event) {
    console.log('按下了键盘上的键：', event.key);
    // 在这里根据按下的键执行操作
    // 例如：当用户按下Enter键时执行某个操作
    if (event.key === 'Enter') {
        console.log('用户按下了Enter键！');
    }
});

至此，关于 js window.addEventListener 的介绍结束，更多相关内容请搜索本站历史文章或浏览后续文章，感谢支持！

JavaScript window.addEventListener 用法详解与实战案例