如何使用 JavaScript 给 DOM 元素添加事件监听？

给 DOM 元素添加事件监听允许 JavaScript 响应用户交互（如点击、键盘输入）。主要方法有使用 on 属性或 addEventListener。

1. 使用 on 属性方法

这是最简单的方式，但同一事件只能绑定一个处理函数。语法：

element.on[事件类型] = function;
// 例如，针对按钮点击添加监听
const button = document.getElementById('myButton');
button.onclick = function() {
  console.log('Button clicked!');
};
// 移除监听：
button.onclick = null;

特点：

• 优点：简单易用，兼容旧浏览器；
• 缺点：只支持一个事件处理函数（绑定新函数会覆盖旧函数），不支持捕获阶段。

2. 使用 addEventListener 方法（推荐）

这是标准方式，支持多个监听器与事件阶段控制。语法：

element.addEventListener(eventType, listener [, options]);
// 例如，添加点击事件监听
button.addEventListener('click', handleClick);
function handleClick(event) {
  console.log('Target:', event.target); // 事件对象可访问目标信息
}
// 移除监听需确保函数引用：
button.removeEventListener('click', handleClick);

特性：

• 多监听器支持：可在同一元素绑定多个同类型事件；
• 捕获/冒泡阶段：通过第三个参数控制（true 为捕获，false 为冒泡，默认冒泡）；
• 事件对象：自动传入参数，提供 target、type 等属性。

完整步骤：

1. 选择元素（如 getElementById 或 querySelector）；
2. 调用添加方法（推荐 addEventListener 以确保灵活性与可扩展性）；
3. 定义函数逻辑，响应事件；
4. 移除时调用 removeEventListener（与添加时保持相同函数引用）。

最佳实践：

• 优先用 addEventListener；
• 考虑事件委托（用冒泡减少绑定开销）；
• 页面加载后绑定（如 DOMContentLoaded 事件中）.