JavaScript通过addEventListener实现事件监听，语法为element.addEventListener(event, function, useCapture)；支持click、input、keydown等事件类型，可绑定多个处理函数；推荐使用命名函数或箭头函数提升可维护性，注意箭头函数中this指向问题；通过removeEventListener移除监听时需传入相同函数引用，避免内存泄漏。
JavaScript中的事件监听是实现用户交互的核心机制之一。通过addEventListener方法，我们可以为DOM元素绑定事件处理函数，从而响应用户的操作，比如点击、鼠标移动、键盘输入等。
addEventListener基本语法
addEventListener 是 JavaScript 中用于注册事件处理程序的标准方法。它不会覆盖已有的事件监听器，允许你为同一个元素的同一事件添加多个处理函数。
其基本语法如下：
element.addEventListener(event, function, useCapture);- event：要监听的事件类型，如 "click"、"mouseover"、"keydown" 等（不带 on 前缀）
- function：事件触发时执行的函数
- useCapture：可选参数，布尔值，表示是否在捕获阶段触发，默认为 false（即在冒泡阶段触发）
常见事件类型示例
以下是一些常用的事件类型和对应的使用场景：
- "click"：鼠标点击元素
- "input"：输入框内容发生变化
- "keydown"：键盘按键被按下
- "mouseenter"：鼠标进入元素区域
- "submit"：表单提交事件
示例：为按钮添加点击事件
const btn = document.getElementById('myButton');btn.addEventListener('click', function() {
alert('按钮被点击了！');
});
使用命名函数或箭头函数
除了匿名函数，你也可以使用命名函数或箭头函数来提升代码可读性和复用性。
function handleClick() {console.log('执行点击操作');
}
btn.addEventListener('click', handleClick);
这样做的好处是便于后续移除事件监听器（使用 removeEventListener 时必须传入相同的函数引用）。
使用箭头函数的写法：
input.addEventListener('input', (e) => {console.log('当前输入值：', e.target.value);
});
事件对象与this指向
事件处理函数会自动接收一个事件对象 e（或 event），它包含事件的详细信息，如触发元素、鼠标坐标、按键值等。
element.addEventListener('click', function(e) {console.log(e.target); // 获取触发事件的元素
console.log(this); // this 指向绑定事件的元素
});
注意：在箭头函数中，this 不指向DOM元素，而是继承外层作用域，因此需谨慎使用。
移除事件监听器
如果需要解除事件绑定，可以使用 removeEventListener，但必须传入与添加时完全相同的函数引用。
function tempHandler() {console.log('只执行一次');
btn.removeEventListener('click', tempHandler);
}
btn.addEventListener('click', tempHandler);
基本上就这些。掌握 addEventListener 的使用，能让你更灵活地控制网页交互行为，避免传统 onclick 赋值方式的覆盖问题。实际开发中推荐始终使用 addEventListener 来绑定事件。
