JavaScript通过addEventListener实现事件监听，可为元素绑定多个事件处理函数，支持捕获与冒泡阶段控制，常用语法为element.addEventListener(event, function, useCapture)；相比onclick，其优势在于支持多监听器、灵活事件流控制、可移除监听且不覆盖原有逻辑；常见事件包括click、keydown、submit等；可通过removeEventListener移除具名函数监听器，但无法移除匿名函数。
JavaScript中的事件监听是实现用户交互的核心机制。通过addEventListener方法，可以为页面元素绑定事件处理函数，响应用户的操作，比如点击、键盘输入、鼠标移动等。
addEventListener基本语法
addEventListener是DOM元素的一个方法，用于注册事件监听器。它的基本语法如下：
- event：要监听的事件类型，如"click"、"keydown"、"mouseover"等
- function：事件触发时执行的回调函数
-
useCapture：可选参数，布尔值，表示是否在捕获阶段触发，默认为
false（即在冒泡阶段触发）
示例：为按钮添加点击事件
const btn = document.getElementById('myButton');btn.addEventListener('click', function() {
alert('按钮被点击了！');
});
事件监听的优势
相比直接使用onclick等内联事件属性，addEventListener有以下几个优点：
立即学习“Java免费学习笔记（深入）”；
- 可以为同一个元素的同一事件类型添加多个监听器
- 更灵活地控制事件流（捕获 vs 冒泡）
- 便于后期移除事件监听（配合
removeEventListener） - 避免覆盖原有事件处理逻辑
示例：绑定多个点击事件
btn.addEventListener('click', function() {
console.log('第一次点击响应');
});
btn.addEventListener('click', function() {
console.log('第二次点击响应');
});
常用事件类型
常见的事件类型包括：
- 鼠标事件："click"、"dblclick"、"mousedown"、"mouseup"、"mousemove"、"mouseenter"、"mouseleave"
- 键盘事件："keydown"、"keyup"、"keypress"
- 表单事件："submit"、"change"、"input"、"focus"、"blur"
- 窗口事件："load"、"resize"、"scroll"
示例：监听键盘输入
document.addEventListener('keydown', function(e) {if (e.key === 'Enter') {
console.log('按下了回车键');
}
});
移除事件监听
使用removeEventListener可以移除已绑定的监听器，语法与addEventListener一致，但必须传入相同的函数引用。
console.log('页面滚动');
}
window.addEventListener('scroll', handleScroll);
// 移除监听
window.removeEventListener('scroll', handleScroll);
注意：不能移除匿名函数的监听器，因此建议将回调函数定义为具名函数或变量引用。
基本上就这些。掌握addEventListener的使用，能让你更好地控制网页的交互行为，写出更清晰、可维护的JavaScript代码。 
