addEventListener 的用法示例介绍

更新日期：2026-09-15 19:27:10

标题

内容

在 JavaScript 中，`addEventListener` 是一个非常重要的方法，用于为 DOM 元素绑定事件监听器。它使得开发者可以更灵活地处理用户交互行为，如点击、输入、键盘操作等。相比传统的内联事件处理方式（如 `onclick`），`addEventListener` 提供了更高的可维护性和扩展性。

以下是对 `addEventListener` 的用法进行总结，并通过表格形式展示常见事件类型及其使用示例。

一、基本语法

```javascript

element.addEventListener(event, function, useCapture);

```

- event: 要监听的事件类型，如 `"click"`、`"keydown"` 等。

- function: 当事件触发时执行的函数。

- useCapture（可选）：布尔值，表示是否在捕获阶段处理事件，默认为 `false`。

二、常用事件类型及示例

事件类型	描述	示例代码
`click`	鼠标点击事件	`button.addEventListener('click', () => { ... });`
`mouseover`	鼠标进入元素区域	`div.addEventListener('mouseover', () => { ... });`
`mouseout`	鼠标离开元素区域	`div.addEventListener('mouseout', () => { ... });`
`keydown`	键盘按键按下	`document.addEventListener('keydown', (e) => { ... });`
`keyup`	键盘按键释放	`document.addEventListener('keyup', (e) => { ... });`
`input`	输入框内容变化	`inputField.addEventListener('input', () => { ... });`
`submit`	表单提交	`form.addEventListener('submit', (e) => { e.preventDefault(); ... });`
`change`	输入控件内容发生变化	`select.addEventListener('change', () => { ... });`
`load`	页面或资源加载完成	`window.addEventListener('load', () => { ... });`

三、注意事项

1. 避免重复绑定：多次调用 `addEventListener` 会导致多个事件处理函数被添加，可能造成性能问题或逻辑混乱。

2. 移除监听器：若需要移除某个事件监听器，需使用 `removeEventListener`，且必须使用相同的函数引用。

3. 事件冒泡与捕获：通过第三个参数 `useCapture` 可以控制事件是在捕获阶段还是冒泡阶段触发。

四、示例代码

```javascript

const button = document.getElementById('myButton');

button.addEventListener('click', function() {

alert('按钮被点击了！');

});

```

五、总结

`addEventListener` 是现代 JavaScript 开发中不可或缺的一部分，它提供了更强大和灵活的方式来处理网页中的各种交互行为。掌握其用法，有助于提高代码的可读性、可维护性以及用户体验。建议在实际开发中尽量使用此方法，避免使用过时的内联事件写法。

随便看