JavaScript事件是浏览器对用户行为或状态变化的信号通知机制，本质是生成Event对象并按规则分发给监听器，由回调函数执行逻辑。
JavaScript 事件到底是什么
JavaScript 事件不是“点击一下就触发个函数”这么简单，而是浏览器对用户行为或系统状态变化的**信号通知机制**。它本质是一套约定：当某个条件满足（比如 click、load、keydown），浏览器会生成一个 Event 对象，并按规则分发给匹配的监听器。
关键点在于：事件本身不执行逻辑，它只是“喊一嗓子”，真正干活的是你注册的回调函数。没监听，事件就静默丢弃；监听了，但回调里写错 this 或漏了 preventDefault()，行为就会和预期不符。
addEventListener 是唯一推荐的监听方式
别用 onclick="..." 行内属性，也别直接赋值 element.onclick = handler。它们只能绑定一个监听器，且无法控制捕获/冒泡阶段，调试时还容易被覆盖。
addEventListener() 是现代标准，支持多个监听器共存、精确控制阶段、可移除、兼容性好（IE9+）：
立即学习“Java免费学习笔记（深入）”；
const btn = document.getElementById('submit');
btn.addEventListener('click', function(e) {
console.log('按钮被点了');
e.preventDefault(); // 阻止表单默认提交
});
// 同一个元素，还能加另一个 click 监听器
btn.addEventListener('click', () => alert('第二个响应')); // 不会覆盖上面那个
常见陷阱：
- 忘记传第三个参数
{ capture: true }导致捕获阶段逻辑失效 - 箭头函数里用
this指向全局，而普通函数里this指向绑定的元素 - 监听器里异步操作（如
fetch）后试图操作已卸载的 DOM，引发错误
事件对象 e 里藏着关键信息
所有事件回调的第一个参数（习惯叫 e 或 event）是 Event 实例，不同事件类型会扩展出不同属性：
-
e.target：实际触发事件的元素（可能不是你绑定的那个） -
e.currentTarget：当前正在执行监听器的元素（就是addEventListener绑定的对象） -
e.type：事件类型字符串，比如"input"、"submit" -
e.key（仅keydown/keyup）：按下的键名 -
e.clientX/e.clientY（鼠标事件）：相对于视口的坐标 -
e.preventDefault()：阻止默认行为（如链接跳转、表单提交） -
e.stopPropagation()：阻止事件继续冒泡（慎用，会影响父级监听）
例如处理表单输入防抖，你要靠 e.target.value 拿当前值，而不是去 querySelector 重新取：
input.addEventListener('input', debounce(function(e) {
console.log('当前输入：', e.target.value);
}, 300));移除监听器必须用同引用函数
想清理内存或临时禁用监听？不能写成这样：
btn.addEventListener('click', function() { /* ... */ });
btn.removeEventListener('click', function() { /* ... */ }); // ❌ 失败！函数引用不同必须保存函数引用：
function handleClick() {
console.log('clicked');
}
btn.addEventListener('click', handleClick);
// ……后面某处
btn.removeEventListener('click', handleClick); // ✅ 成功移除或者用 AbortController（现代写法，Chrome88+）：
const controller = new AbortController();
btn.addEventListener('click', () => { /* ... */ }, { signal: controller.signal });
// 后面调用
controller.abort(); // 自动移除所有带该 signal 的监听器动态插入的元素（如 AJAX 加载内容）要监听委托事件，别在插入后一个个 addEventListener —— 容易漏绑、难清理。用事件委托更稳：
document.addEventListener('click', function(e) {
if (e.target.matches('.dynamic-btn')) {
console.log('动态按钮被点');
}
});事件机制看着简单，但 e.target 和 e.currentTarget 的区别、冒泡路径的打断、监听器引用管理、委托时机的选择，这些地方一不留神就埋下难以复现的 bug。写监听器前，先想清楚：这个事件谁该响应？是否需要阻止默认？要不要影响其他监听？
