window.addEventListener 用法

window.addEventListener 是JavaScript中用来为DOM元素（在本例中是浏览器窗口window）添加事件监听器的方法。这对于响应用户操作（如点击、滚动等）或页面/浏览器的特定状态变化非常有用。下面是如何使用window.addEventListener的基本语法和一个示例：

基本语法

window.addEventListener(eventType, listener, options);

• eventType (字符串): 要监听的事件类型，例如 'click', 'scroll', 'load' 等。
• listener (函数): 当事件发生时调用的函数。这个函数接收一个事件对象作为参数，你可以通过这个对象访问到与事件相关的信息。
• options (可选对象): 用于指定事件监听器的行为，比如是否使用捕获阶段，默认为false（冒泡阶段）。可以设置{capture: true}来启用捕获阶段，或者{once: true}让监听器只触发一次后自动移除等。

示例

假设我们想在页面加载完成后显示一条消息，可以这样使用window.addEventListener：

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

如果希望在用户点击页面任何位置时执行某些操作，并且只希望该监听器生效一次，可以这样写：

window.addEventListener('click', function(event) {
  console.log('用户点击了页面！');
  // 执行一些操作...
  
  // 确保这个监听器只运行一次并移除自己
  window.removeEventListener('click', arguments.callee, false);
}, {once: true});

注意事项

• 确保你在调用removeEventListener时传入了相同的函数引用（或使用arguments.callee在严格模式下不可用），以便正确地移除事件监听器。
• 使用addEventListener相比于直接赋值给事件属性（如element.onclick = function() {}）更灵活，因为它允许为同一事件类型添加多个监听器。
• 了解事件流（捕获阶段、目标阶段、冒泡阶段）有助于更有效地使用addEventListener，特别是当你需要控制事件处理的顺序时。