JavaScript事件处理应掌握核心机制而非死记类型：用addEventListener绑定（禁用onclick属性），关注click/input/keydown/submit/scroll五类高频事件及陷阱，善用event.target/currentTarget、preventDefault、stopPropagation，优先事件委托。
JavaScript 事件处理不是靠“记住所有事件类型”，而是掌握核心机制 + 知道怎么查、怎么绑、怎么防坑。
怎么正确绑定事件：addEventListener 是唯一推荐方式
直接写 onclick 属性或 HTML 里加 onclick="..." 看似简单，但会覆盖已有监听器、无法移除、破坏关注点分离。现代代码必须用 addEventListener()。
-
addEventListener()支持同一事件绑定多个处理函数，互不干扰 - 第三个参数常用
{ once: true }（执行一次自动解绑）或{ capture: true }（捕获阶段触发） - 移除时必须传入**完全相同的函数引用**，匿名函数无法被移除：
el.addEventListener('click', handler); el.removeEventListener('click', handler); - 箭头函数在事件中无法正确访问
this，优先用普通函数或显式绑定
最常遇到的 5 类事件及其典型陷阱
不用背全部事件，先盯紧这五种高频场景，覆盖 80% 日常需求：
-
click：注意移动端存在 300ms 延迟，可用touchstart替代（但需防误触），或引入fastclick库 -
input：比change更及时，实时获取或的值变化；但不会触发于contenteditable元素，得用DOMSubtreeModified（已废弃）或MutationObserver -
keydown/keyup：判断按键用event.key（如"Enter"、"ArrowUp"），别用已废弃的event.keyCode；组合键检测要同时看event.ctrlKey、event.shiftKey等布尔属性 -
submit：绑定在上，不是按钮；务必调用event.preventDefault()阻止页面刷新，否则表单仍会提交并跳转 -
scroll：高频触发，直接写逻辑易卡顿；必须节流（throttle）或防抖（debounce），或改用IntersectionObserver替代滚动监听可见性
事件对象里哪些字段真正有用
打印 event 看一堆属性？只记这几个关键字段就够了：
立即学习“Java免费学习笔记（深入）”；
-
event.target：真正触发事件的元素（可能为子元素），和this（即currentTarget）不同 -
event.currentTarget：当前绑定监听器的元素，用于事件委托时区分目标 -
event.preventDefault()：阻止默认行为（如链接跳转、表单提交、右键菜单） -
event.stopPropagation()：阻止冒泡，慎用；多数情况应优先用事件委托而非阻止冒泡 -
event.isTrusted：判断是否由真实用户操作触发（true），脚本调用dispatchEvent()生成的为false，可用于防自动化点击
事件委托为什么不是“高级技巧”而是必选项
动态添加的元素（如 AJAX 加载列表、React/Vue 渲染项）如果每个都绑 click，既浪费内存又难维护。事件委托才是标准解法。
- 把监听器统一挂在父容器上，利用事件冒泡捕获子元素触发
- 通过
event.target.matches('.btn-delete')判断是否命中目标选择器 - 避免对
document或window直接监听，选离目标最近的稳定父节点 - 注意：
focus/blur不冒泡，需用focusin/focusout替代
事件机制本身很简单，复杂的是 DOM 生命周期、异步渲染、移动端兼容、性能边界这些隐性条件。别试图穷举事件类型，先确保每次绑定都可预测、可清理、可调试。
