JavaScript事件监听核心是addEventListener方法，支持灵活绑定、多事件处理及精确控制执行阶段。通过event参数指定事件类型，handler定义回调函数，options可配置捕获、一次性触发和被动模式等行为。相比onclick更优，允许多个监听器共存且提升维护性。使用removeEventListener需保持函数引用一致，避免内存泄漏。事件对象提供target、currentTarget、preventDefault和stopPropagation等常用属性与方法。事件委托利用冒泡机制在父元素上处理子元素事件，适用于动态内容。CustomEvent可创建自定义事件实现组件通信。掌握这些要点可高效应对前端交互需求。
JavaScript事件监听的核心在于使用addEventListener方法为元素绑定事件，实现用户交互响应。相比传统内联事件（如onclick），事件监听更灵活、可维护性更强，支持多个相同类型事件的绑定，且能精确控制执行时机。
addEventListener 基本语法
addEventListener 是 DOM 元素的方法，用于注册事件处理函数。其基本语法如下：
element.addEventListener(event, handler, options || useCapture)- event：事件名称，如 'click'、'mouseover'、'keydown' 等（不带 on 前缀）
- handler：回调函数，事件触发时执行的代码
- options / useCapture：可选参数，控制事件流阶段（捕获或冒泡）及行为特性
示例：
const btn = document.getElementById('myBtn');btn.addEventListener('click', function() {
console.log('按钮被点击了');
});
事件监听的高级选项
第三个参数可以是布尔值或一个配置对象，常用选项包括：
立即学习“Java免费学习笔记（深入）”；
- capture：true 表示在捕获阶段触发，false 在冒泡阶段（默认）
- once：设为 true，监听器只触发一次后自动移除
- passive：true 表示不会调用 preventDefault()，提升滚动等事件性能
示例：只执行一次的监听器
btn.addEventListener('click', function() {console.log('仅触发一次');
}, { once: true });
移除事件监听
使用 removeEventListener 移除监听，防止内存泄漏或重复绑定。注意：必须传入与添加时完全相同的函数引用。
function handleClick() {console.log('点击触发');
}
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);
匿名函数无法被移除，因此建议使用具名函数或变量保存函数引用。
事件对象与常用操作
事件处理函数自动接收一个 Event 对象作为参数，包含事件详情：
- e.target：实际触发事件的元素（可能不同于 this）
- e.currentTarget：当前绑定监听的元素（通常等于 this）
- e.preventDefault()：阻止默认行为（如链接跳转）
- e.stopPropagation()：阻止事件冒泡
示例：阻止表单提交并打印目标元素
const form = document.querySelector('form');form.addEventListener('submit', function(e) {
e.preventDefault();
console.log('提交被拦截');
console.log('目标元素:', e.target);
});
事件委托：高效监听动态元素
通过在父元素上监听事件，利用事件冒泡机制处理子元素的事件，特别适合动态添加的元素。
const list = document.getElementById('list');list.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点击了列表项:', e.target.textContent);
}
});
即使后续通过 JS 添加新的 li 元素，也能正常响应点击事件。
自定义事件的创建与触发
除了原生事件，还可创建和触发自定义事件：
// 创建自定义事件const myEvent = new CustomEvent('myCustomEvent', {
detail: { message: '这是自定义数据' }
});
// 绑定自定义事件
window.addEventListener('myCustomEvent', function(e) {
console.log('自定义事件触发:', e.detail.message);
});
// 手动触发
window.dispatchEvent(myEvent);
常用于组件通信或状态通知。
基本上就这些。掌握 addEventListener 的用法、理解事件流、合理使用事件委托和自定义事件，就能应对大多数前端交互需求。不复杂但容易忽略细节，比如函数引用一致性或 passive 选项的影响。
