17370845950

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); —— 支持同一事件绑定多个处理函数，可选是否捕获、是否只触发一次

事件处理函数中的关键细节

在事件回调中，通常需要访问事件对象和目标元素：

• 事件处理函数默认接收一个 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);
  }
});

这种方式节省内存、兼容后续添加的节点，是高性能交互的常见实践。