🔍 从简单到复杂:JavaScript 事件处理的全方位解读

基础语法

事件机制是指当用户在DOM元素上执行特定操作(例如点击按钮、移动鼠标等)时,会触发相应的事件。JavaScript通过监听这些事件,并将对应的处理函数绑定到事件上,从而对用户的交互做出响应。

javascript 复制代码
// 1. HTML属性方式(内联方式)
<div class="event-box" onclick="alert('HTML属性方式')">HTML属性方式</div>


// 2. DOM属性方式绑定事件
<div class="event-box" id="domPropertyBox">DOM属性方式</div>
domPropertyBox.onclick = function () {
  logEvent('DOM属性方式触发了点击事件')
}

// 3. addEventListener方式绑定事件(推荐)
<div class="event-box" id="listenerBox">addEventListener方式</div>
listenerBox.addEventListener('click', function () {
  logEvent('addEventListener方式触发了点击事件')
})

不同事件绑定方式的特性如下:

特性 HTML属性方式 DOM属性方式 addEventListener
多个事件处理器
控制事件阶段 ❌ (只冒泡) ❌ (只冒泡) ✅ (可选捕获/冒泡)
移除事件 困难 设置为null removeEventListener
代码组织 混合在HTML中 分离 完全分离
this指向 window 元素本身 元素本身

可列举的事件类型:

事件类型 事件名称 描述
鼠标事件 click 单击事件
dblclick 双击事件
contextmenu 右键点击事件
mousedown 鼠标按下事件
mouseup 鼠标释放事件
mouseover 鼠标移入元素事件
mouseout 鼠标移出元素事件
mousemove 鼠标在元素上移动事件
键盘事件 keydown 键盘按键按下事件
keyup 键盘按键释放事件
keypress 键盘按压事件(字符键)
表单事件 submit 表单提交事件
reset 表单重置事件
focus 获得焦点事件
blur 失去焦点事件
input 输入内容变化事件
change 内容改变且失去焦点事件
拖放事件 dragstart 开始拖动元素
drag 拖动元素过程中
dragend 拖动操作结束
dragenter 拖动元素进入目标区域
dragover 拖动元素在目标区域上方
dragleave 拖动元素离开目标区域
drop 在目标区域放置被拖元素
滚动事件 scroll 元素或文档被滚动
剪贴板事件 copy 复制操作
cut 剪切操作
paste 粘贴操作
触摸事件 (移动端) touchstart 触摸开始
touchmove 触摸移动
touchend 触摸结束
touchcancel 触摸被系统中断
窗口/文档事件 resize 窗口大小改变
load 页面加载完成

事件捕获与冒泡

在JavaScript中,事件的传播过程遵循事件流机制,事件流的顺序包括捕获和冒泡两种方式。整个事件流可以分为三个阶段:首先是 捕获阶段 ,然后是 目标阶段 ,最后是 冒泡阶段。事件捕获和事件冒泡是处理DOM事件的两种不同机制。

  • 事件捕获是从最外层的元素开始,逐步向内传播到目标元素。例如:从windowdocument,再到htmlbody,最终到达div
  • 事件冒泡则是从目标元素开始,逐步向外传播到最外层的元素。例如:从divbody,再到htmldocument,最终到达window
javascript 复制代码
element.addEventListener(event, handler, useCapture);
// event:具体的事件
// handler:处理的函数
// 指定什么事件:默认为false,事件在冒泡阶段处理

event.preventDefault() // 阻止浏览器对事件的默认行为,
// 如:阻止链接的跳转、表单的提交、输入框的默认行为
event.stopPropagation() //阻止事件冒泡,同级不阻止
event.stopImmediatePropagation() //阻止事件冒泡,同级阻止

案例如下

事件委托

  • 事件委托(Event Delegation) 是一种基于事件冒泡机制的优化技术。它允许我们将事件监听器添加到父元素,而不是直接添加到多个子元素上。
  • 当子元素的事件被触发时,事件会冒泡到父元素,然后由父元素上的监听器处理。通过检查事件的target属性,我们可以确定哪个具体的子元素触发了事件。
javascript 复制代码
//事件代理  节约内存 提升性能(不需要注销子节点)
let ul = document.getElementById("ul");
ul.addEventListener("click", (event) => {
    console.log(event.target.innerHTML);
})

案例如下

特性 事件委托 直接绑定
内存使用 ✅ 低(只有一个事件监听器) ❌ 高(每个元素一个监听器)
初始化时间 ✅ 快(只需绑定一次) ❌ 慢(需要为每个元素绑定)
动态元素处理 ✅ 自动支持新添加的元素 ❌ 需要手动为新元素绑定事件
事件处理时间 ⚠️ 稍慢(需要遍历确定目标元素) ✅ 稍快(直接知道目标元素)
代码复杂度 ✅ 简洁 ❌ 冗余
元素移除 ✅ 不需要手动解绑 ❌ 需要手动解绑避免内存泄漏
点击性能测试 ⚠️ 稍慢(需要判断目标元素) ✅ 稍快(直接绑定到目标元素)

VUE 事件系统

www.cnblogs.com/WindrunnerM...

Vue中通过 v-on 或其语法糖 @ 指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成 AST ,生成render函数后并执行得到VNodeVNode 生成真实DOM 节点或者组件时候使用addEventListener方法进行事件绑定。

下一篇会对 VUE 的事件系统将进行详细讲解......

相关推荐
知了清语17 分钟前
pnpm之monorepo项目, vite版本冲突, 导致vite.config.ts ts警告处理
前端
弗锐土豆39 分钟前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku42 分钟前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined244 分钟前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
浅墨momo1 小时前
搭建第一个Shopify App
前端·程序员
wangpq1 小时前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js
然我1 小时前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
Codebee1 小时前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
Running_C1 小时前
常见web攻击类型
前端·http