document.addEventListener使用介绍

`document.addEventListener` 是 JavaScript 中的一个常用方法，用于向指定元素添加事件监听器，以便在特定事件发生时执行代码。以下是对 `document.addEventListener` 方法的简要介绍和使用示例。

### 基本语法

element.addEventListener(event, function, useCapture);

- **event**: 指定要监听的事件类型，如 `click`、`mouseover`、`keydown` 等。

- **function**: 当事件发生时，需要调用的函数。

- **useCapture** (可选): 布尔值，指定事件是否在捕获或冒泡阶段执行。默认为 `false`，即事件在冒泡阶段执行。

### 使用示例

#### 监听点击事件

document.addEventListener('click', function(event) {
    console.log('页面被点击了！', event);
});

这段代码会在用户点击页面的任何地方时，在控制台输出消息，并显示事件对象。

#### 监听键盘事件

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('回车键被按下了！');
    }
});

这个示例会监听键盘按键事件，如果按下的键是回车键，则在控制台输出消息。

### 注意事项

- 同一个元素可以为同一个事件添加多个监听器。

- 使用 `removeEventListener` 方法可以移除之前添加的事件监听器，但需要注意传递的函数引用必须相同。

- 监听器函数内部可以使用 `event` 对象访问事件的相关信息，如事件类型、目标元素等。

通过 `document.addEventListener` 方法，你可以轻松地为页面元素添加各种事件监听器，以实现丰富的交互效果。