01. 理解与准备
01.1 事件监听的基本概念
在 JavaScript 中，事件监听器用于在用户与页面交互时执行代码。核心机制是将回调函数绑定到某个元素的特定事件上，浏览器在事件发生时调用回调。
要点包括：目标元素、事件类型（如 click、input、keydown）以及 回调函数 的定义方式。
// 基本要素示例
const btn = document.querySelector('#btn');
btn.addEventListener('click', function (ev) {console.log('按钮被点击');
});
01.2 addEventListener 的特性
浏览器在事件目标上注册监听器，事件在捕获阶段或冒泡阶段触发时调用回调。捕获阶段与 冒泡阶段 的选择可以通过第三个参数配置。
此外，配置对象如 { capture: true/ false, once: true/ false, passive: true/ false } 控制监听器行为，尤其是 once 可以让监听器只执行一次。
通过理解这些特性，可以实现更加精细化的事件处理行为，提升页面交互体验。
02. 绑定事件监听器的基础
02.1 绑定的步骤与示例
第一步是获取目标元素，第二步使用 addEventListener 绑定回调，第三步在需要时进行清理以释放资源。
使用 事件类型（如 "click"）和 回调函数，即可实现对用户交互的响应。
// 绑定并触发一个点击事件
const btn = document.getElementById('action');
function handleClick(e) {console.log('点击事件已触发');
}
btn.addEventListener('click', handleClick);
02.2 解绑的要点
要成功移除事件监听器，必须传入与绑定时相同的函数引用，以及相同的选项配置。
如果使用了 匿名函数，将无法通过 removeEventListener 解绑，因此需要使用命名函数或将回调分配给一个变量。
// 解绑的正确方式（使用同一个引用）
const btn = document.getElementById('action');
function onClick(e) { console.log('被移除前仍可点击'); }
btn.addEventListener('click', onClick);// 某个时刻移除
btn.removeEventListener('click', onClick);
03. 命名函数与匿名函数：绑定与移除的取舍
03.1 使用命名函数的好处
使用命名函数 便于调试，也方便在以后需要解绑时找到对应的引用。
命名函数的绑定通常混合在模块内，更易于维护和测试。
function handleClick(e) {console.log('元素被点击');
}
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);
03.2 使用匿名函数的权衡
如果选择使用匿名函数，解绑将变得困难，因为没有对该回调建立一个可引用的变量。
为避免这种情况，可以将回调分配给变量，然后在需要时使用同一引用进行解绑。
// 使用变量保存回调引用，便于解绑
const btn = document.querySelector('#btn');
const onClick = (e) => { console.log('匿名回调但带引用'); };
btn.addEventListener('click', onClick);
// 解绑
btn.removeEventListener('click', onClick);
04. 事件对象与默认行为控制
04.1 事件对象的常用属性与方法
事件回调会接收一个 事件对象，其中包含 target、type、以及坐标等信息。
通过 preventDefault() 可以阻止浏览器的默认行为，stopPropagation() 可以阻止事件继续冒泡或捕获。
document.querySelector('#link').addEventListener('click', function (e) {e.preventDefault(); // 阻止默认跳转e.stopPropagation(); // 阻止事件继续冒泡console.log('事件对象信息：', e.type, e.target);
});
04.2 实践中的示例：表单提交处理
在表单提交场景中，通常需要阻止页面刷新以进行异步处理，preventDefault 常被用于此目的。
通过读取 event.target 可以访问提交的数据源，从而执行自定义逻辑。
const form = document.querySelector('#myForm');
form.addEventListener('submit', function (e) {e.preventDefault();const data = new FormData(form);console.log('表单数据：', Object.fromEntries(data.entries()));
});
05. 事件委托与性能优化
05.1 为什么使用事件委托
事件委托通过将监听器绑定在父容器上，减少了事件处理器的数量，并利用事件冒泡实现对子元素的响应。
在动态添加的新元素上也能工作，因为事件处理是在父端统一处理，而不是为每个子元素单独绑定。
// 事件委托示例：监听容器点击再判断目标
const list = document.querySelector('#list');
list.addEventListener('click', function (e) {const item = e.target.closest('.item');if (item) {console.log('点击了项：', item.textContent);}
});
05.2 性能与内存考虑
绑定过多监听器会增加内存占用，因此优先使用事件委托，同时注意避免在回调中执行耗时操作。
必要时对事件处理进行节流或防抖，确保用户体验流畅，降低抖动对页面的影响。
06. 从绑定到移除的完整教程实战
06.1 场景设定
在这个完整流程中，我们将演示如何在容器中为多达若干个按钮绑定点击事件，随后在一定条件或时间后统一移除这些监听器，确保资源得到释放。
完整流程包括：选择目标、绑定事件、触发事件、再执行移除操作。
// 实战：容器内按钮的点击事件绑定与移除
const container = document.querySelector('#container');
function onBtnClick(e) {if (e.target && e.target.matches('.btn')) {console.log('按钮点击：', e.target.textContent);}
}
// 绑定事件代理
container.addEventListener('click', onBtnClick);// 模拟在5秒后移除监听（适合演示资源回收）
setTimeout(() => {container.removeEventListener('click', onBtnClick);console.log('已移除事件监听器');
}, 5000);
06.2 逐步演练：手动触发与移除
在开发中，通常需要在特定条件下手动移除监听器，例如组件销毁、页面跳转或状态变更；因此，正确的解绑时机非常重要。
通过维护对回调的引用（函数引用）可以实现精准解绑，避免潜在的内存泄漏。
