JavaScript事件是用户或浏览器触发的交互动作，核心机制包括用户交互、页面生命周期、表单及网络事件；推荐使用addEventListener绑定，注意e.target与e.currentTarget区别，善用事件委托提升性能。
JavaScript事件是用户或浏览器自身触发的特定动作，比如点击按钮、页面加载完成、键盘按键按下、鼠标移动等。事件让网页具备交互能力，是前端开发的核心机制之一。
常见的JavaScript事件类型
事件按来源和用途可分为几类：
- 用户交互事件：click、dblclick、mousedown、mouseup、mousemove、keydown、keyup、input、submit
- 页面生命周期事件：load（页面/资源加载完）、DOMContentLoaded（DOM结构就绪）、beforeunload、unload
- 表单相关事件：focus、blur、change、submit、reset
- 网络与资源事件：error（图片加载失败）、abort、load（图片、脚本等单独资源加载完成）
三种主流事件绑定方式
绑定事件就是告诉JS“当某事件发生时，执行什么操作”。常用方法有以下三种：
-
HTML内联事件处理（不推荐）：
—— 逻辑与结构混杂，难以维护 -
DOM元素属性赋值（仅支持单个）：
btn.onclick = function() { console.log('ok'); };—— 后续赋值会覆盖前一个，无法叠加 -
addEventListener()（推荐）：
btn.addEventListener('click', handler);—— 支持同一事件绑定多个处理函数，可选是否捕获、是否只触发一次
事件处理函数中的关键细节
在事件回调中，通常需要访问事件对象和目标元素：
立即学习“Java免费学习笔记（深入）”；
- 事件处理函数默认接收一个 Event 对象（如
e或event），包含类型、时间戳、触发元素等信息 -
e.target指向**实际触发事件的元素**（可能为子元素）；e.currentTarget指向**当前绑定事件监听器的元素**（常用于事件委托） -
e.preventDefault()阻止默认行为（如表单提交、链接跳转）；e.stopPropagation()阻止事件冒泡 - 箭头函数中慎用
this，因不绑定 DOM 元素；普通函数中this默认指向e.currentTarget
实用技巧：事件委托
当有一组动态生成的元素（如列表项）需要统一监听事件时，不必逐个绑定，可在父容器上监听，再判断具体目标：
ul.addEventListener('click', e => {
if (e.target.tagName === 'LI') {
console.log('点击了列表项：', e.target.textContent);
}
});
这种方式节省内存、兼容后续添加的节点，是高性能交互的常见实践。
