javascript事件如何处理_有哪些常见事件类型【教程】_技术教程

JavaScript事件处理应掌握核心机制而非死记类型：用addEventListener绑定（禁用onclick属性），关注click/input/keydown/submit/scroll五类高频事件及陷阱，善用event.target/currentTarget、preventDefault、stopPropagation，优先事件委托。

JavaScript 事件处理不是靠“记住所有事件类型”，而是掌握核心机制 + 知道怎么查、怎么绑、怎么防坑。

怎么正确绑定事件：addEventListener 是唯一推荐方式

直接写 onclick 属性或 HTML 里加 onclick="..." 看似简单，但会覆盖已有监听器、无法移除、破坏关注点分离。现代代码必须用 addE

ventListener()。

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 看一堆属性？只记这几个关键字段就够了：

event.target：真正触发事件的元素（可能为子元素），和 this（即 currentTarget）不同
event.currentTarget：当前绑定监听器的元素，用于事件委托时区分目标
event.preventDefault()：阻止默认行为（如链接跳转、表单提交、右键菜单）
event.stopPropagation()：阻止冒泡，慎用；多数情况应优先用事件委托而非阻止冒泡
event.isTrusted：判断是否由真实用户操作触发（true），脚本调用 dispatchEvent() 生成的为 false，可用于防自动化点击