对浏览器事件机制的理解

浏览器事件是什么:

事件是用户操作网页时发生的交互动作,比如 click/move , 事件除了用户触发的动作外,还可以是文档加载,窗口滚动大小调整。事件被封装成一个 event 对象,包含了该事件发生时的所有相关信息( event 的属性)以及可以对事件进行的操作( event 的方法)。

事件触发的过程是怎样的

浏览器的事件触发实际上是有三个阶段的,首先捕获,即从根节点开始传播,一直到目标元素,然后从目标元素开始冒泡,冒泡到根节点。

目前vue不绑定修饰符的话默认都是执行冒泡阶段的回调函数,如果父元素也有绑定点击事件,就会先执行子元素事件,再执行父元素事件。也可以使用capture来指定捕获阶段执行,这样如果父元素绑定的也是捕获事件,那就会先执行父元素的回调,再执行子元素的回调。主要是一个执行先后顺序的问题

对事件委托的理解

事件委托就是利用了事件冒泡的机制,比如ul下的li,本来我们需要给每个li绑定点击事件,但是这样会消耗大量内存,因此我们给ul绑定点击事件,用户点击li的时候,就会冒泡到ul上,执行ul的点击事件,这时候我们利用event.target 来识别实际触发事件的子元素。这个target身上可以获取到li的一些属性,或者当初在li循环的时候就把data-id 定义好,就可以直接用target.dataset.id来获取点击的li元素的id

例如:

javascript 复制代码
<ul @click="myEvent($event)">
  <li :data-id="1">1</li>
  <li :data-id="2">2</li>
  <li :data-id="3">3</li>
</ul>
const myEvent = (event) => {
  console.log(event.target.dataset.id,'event.target')
}

事件委托的使用场景

大量元素需要绑定的情况吧,无限滚动列表、动态渲染的表格数据,比如数据可能动态生成,越来越多,或者会有一些动态生成的dom元素不好绑定【vue已经不需要手动做事件委托了,Vue的模板语法已优化事件处理机制,直接通过@click绑定到子元素时,Vue会复用事件处理器而非重复创建,因此短列表或静态内容无需强制使用事件委托】

事件委托的局限性

当然,事件委托也是有局限的。比如 focus、blur 之类的事件没有事件冒泡机制,所以无法实现事件委托;mousemove、mouseout 这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位,对性能消耗高,因此也是不适合于事件委托的。

如何阻止事件冒泡

vue中使用.stop修饰符,或者手动调用event.stopPropagation

相关推荐
寅时码2 小时前
React 之死·终章:一个 useRef,把闭包陷阱、依赖数组、漫天 rerender 全送走
前端·react.js·ai编程
不好听6132 小时前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
wordbaby2 小时前
为什么刷新页面就 404?聊聊 SPA 路由与 Nginx 的那点事
前端
daols882 小时前
vxe-table 渲染器教程一:实现金额输入控件
javascript·vue.js·vxe-table
不好听6132 小时前
React 核心概念:JSX、组件与数据驱动
前端·react.js
触底反弹2 小时前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听6132 小时前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
GuWenyue2 小时前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
GuWenyue2 小时前
传统Agent工具两大痛点!300行代码落地MCP跨语言工具,彻底解耦LLM与工具
前端·人工智能·算法
小林ixn3 小时前
从 onclick 到 React 合成事件,再到完整应用逻辑:一次前端架构的深度剖析
前端·react.js·前端框架