element.addEventListener() 添加事件监听
最后更新：2026-09-09
element.addEventListener() 添加事件监听
addEventListener 给元素添加事件监听器。是 DOM 事件处理的标准方法（替代 onclick 属性）。
| 分类 | DOM 操作 |
|---|---|
| ES 版本 | DOM |
📝 语法
元素.addEventListener('事件类型', 回调函数);⚙️ 参数
| type | 事件类型，如 'click'、'input'、'submit'。 |
|---|---|
| listener | 事件触发时执行的回调函数。 |
返回值：undefined。
是否修改原值：否（返回新值）
▶ 示例
编辑下方代码，点击运行，在输出面板查看结果：
运行结果：
按钮被点击💡 提示 addEventListener 可以添加多个相同类型的监听器——onclick 属性只能一个。
💡 提示 事件委托：在父元素上监听，通过 event.target 判断实际点击的子元素。
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| element.addEventListener() | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有现代浏览器均支持 | |||||
🏷️ 相关条目
💡 相关案例
更多实战案例即将上线，敬请期待。
📚 相关教程
❓ 常见问题
QaddEventListener 和 onclick 的区别？
AaddEventListener 可添加多个监听器且有捕获/冒泡选项；onclick 只能一个且会被覆盖。
Q如何删除事件监听器？
AremoveEventListener('click', 同一个函数引用)——匿名函数无法删除。
Q什么是事件委托？
A在父元素上监听子元素的事件——通过 event.target 判断来源。适合动态子元素。
