js window.addEventListener实际案例

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 是什么？的文章就介绍到这了,更多相关js window.addEventListener内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论