vue事件中传入$event，使用event.target和event.currentTarget有什么区别？

已于 2022-08-11 14:21:12 修改
阅读量1.6k 收藏
点赞数 1
分类专栏： vue2 文章标签： html javascript css
于 2021-09-05 16:59:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seimeii/article/details/120117554
版权 
比如说事件冒泡，事件是绑定在父元素上，点击子元素也可以触发父元素上的事件，e.target是触发的元素，是子元素，e.currentTarge是父元素：

只有被点击的那个目标元素的event.target才会等于event.currentTarget。

event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。

event.target指向事件发生时的元素
event.currentTarget指向事件绑定的元素

小程序开发 event对象中 target和currentTarget 属性的区别。

```css
首先本质区别是：
event.target返回触发事件的元素
event.currentTarget返回绑定事件的元素
p包含在div内
在outer上点击时，target跟currentTarget是一样的，都是div，而在inner上点击时，e.target是p、e.currentTarget是div

此时可以发现，e.target就是触发事件的标签，触发谁就是谁
e.currentTarget就是绑定事件的标签，绑定哪个事件输出的就是该事件
都挺好，刚刚好
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue event.target 获取子元素_基于 Proxy 实现简易版 Vue
weixin_39958019的博客
01-20 1102
基于 Proxy 实现简易版 Vue​juejin.im分解剖析实现 new Vue() 实例化实现 {{ prop }} 绑定值实现 v-model 双向绑定值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp...
关于event.target和event.currentTarget
Dark_programmer的博客
03-17 279
event.target和 event.currentTarget既然写法不一样，那么肯定用途也是有着区别。 一个简单的栗子： <div class="a_div" @click="clickHandle"> a标签 <div class="b_div">b标签</div> </div> .a_div { width: 300px; height: 300px; background-color: chocolate; .b_di
Vue-事件修饰符-只有event.target是当前操作的元素时才触发事件
最新发布
m0_73839298的博客
05-15 182
什么是事件修饰符？什么是事件修饰符？
Vue的$event的不同表现
weixin_43844696的博客
08-25 427
$event是事件对象的特殊变量，在两种场景下，它有不同的意义，代表不同的对象。 在原生事件中表示事件本身。可以通过$event.target获得事件所在的DOM对象，再通过value进一步获取具体的值。 <template> <div> <input type="text" @input="inputHandler('hello', $event)" /> </div> </template> expor.
VUE中内联代码获取事件对象中的事件触发元素$event.target
m0_48122750的博客
12-07 1341
今天在看<<Vue.js快跑>>这本书时,当中关于获取事件对象$event提到可以在内联代码中实现,作为新手不太理解,内联代码用的也比较少,一般通过绑定方法,在methods的方法中去获取比较多.请教了一下别人之后恍然大悟.记录下来也是一种学习. 当方法中代码只有一行的时候,可以采用内联代码的形式,直接写在html里面. ![这是书中原话,圈起来的地方不太理解](https://img-blog.csdnimg.cn/20201207204051312.jpg?x-..
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
浅谈vue中$event理解和框架中在包含默认值外传参
10-14
总的来说，Vue.js的$event变量为我们提供了一种灵活的方式来处理和传递事件相关的原始数据，同时还能与其他自定义参数一起使用，确保了在组件间的通信中能够传输所有必要的信息。理解并正确使用$event可以帮助我们更...
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
组件之间事件触发 之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说...
面试官-Vue.js 中的 $emit 和 $on 方法有什么区别？.pdf
08-05
Vue.js 中的 $emit 和 $on 方法有什么区别？ 在 Vue.js 中，$emit 和 $on 方法是两个常用的方法，用于实现组件间的通信。它们可以让我们在一个组件中触发一个自定义事件，并在另一个组件中监听这个事件，从而实现...
vue-throttle-event-基于requestAnimationFrame的油门事件。-Vue.js开发
05-27
throttle-event节流事件使用requestAnimationFrame公开一个称为$ throttl的距离方法基于requestAnimationFrame状态属性的vue-throttle-event节流事件使用每个API的Vue组件中公开一个名为$ throttle的距离方法。准备...
vue点击输入框时触发_Vue event.target.value( ) 获取当前文本框的值（回车或者点击触发）...
weixin_32712183的博客
12-24 3039
Vue event.target.value( ) 获取当前文本框的值(由事件触发时)情景描述：假设当前有一个文本框，当我输入内容之后，回车或者点击一个按钮，我们在这个input 上或者这个按钮上绑定事件，触发事件之后执行相应的methods中的处理函数，在methods中的函数中是如何获取文本框中的值的呢？上面一个示例的页面，我们可以在输入框中输入文本，然后回车或者点击添加我们的任务，下面是页面...
vue中使用$event.target.value 来获取input的值
热门推荐
weixin_43074997的博客
08-07 1万+
<template> <div class="input_group"> <label :for="name">{{name}}</label> <input :type="type" :value = "value" :placeholder="place...
Vue中获取当前元素事件的event对象用法（二）——target-当前点击元素 & currentTarget-绑定事件元素 & 获取兄弟元素、子元素、父元素
weixin_44867717的博客
07-07 9221
vue
vue之$event事件
我心坚持
04-30 3551
vue中的$event相当于dom中的event， vue中当函数没有参数时，默认自带 $event事件。 HTML： <i class="el-icon-delete" @click="delsku"></i> script： delsku(e){ console.log(e); }, 当在input中$event表示的是输入值，例如： <div v-for="(ite,inde) in item.list"> <el-input :value
在Vue项目中使用Jquery 用event.target 添加class类名替换图片
若把你比作歌
06-09 2725
在画布处添加点击事件 <div id="icanvas" style="list-style:none;background:white;width:100px" v-html="D_program" @click="getDivE" >{{D_program}}</div> 点击事件如下 getDivE(event){ console.log(event) console.log(event.target) console.log(event.ta
Vue event.target.value( )获取当前文本框的值（回车或者点击触发）
小丫小白菜的博客
07-04 2701
Vue event.target.value( ) 获取当前文本框的值（由事件触发时） 情景描述：假设当前有一个文本框，当我输入内容之后，回车或者点击一个按钮， 我们在这个input 上或者这个按钮上绑定事件，触发事件之后执行相应的methods中 的处理函数，在methods中的函数中是如何获取文本框中的值的呢？ 案例： 我们给input 绑定了enter的触发事件，也就是说只要使用enter键，那么就会执行后面的函数，这种方...
vue中target和eventTarget的区别
np918的博客
08-01 7325
event.target始终指向事件发生时的元素，而event.currentTarget指向事件所绑定的元素。 例如: <div @click="openPlays"> <i>aaa</i> 内容元素</div> 当点击div时候触发openPlays，并往openPlays中传入当前对象 openPlays(e){ console.log(...
事件对象(event)
SqlloveSyn的博客
08-05 560
1.event 就是一个事件对象，写到侦听函数的小括号里，当作形参来看。 2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。 3.事件对象是我们事件的一系列跟事件相关的数据的集合。比如鼠标点击事件里面就包含了鼠标的相关信息，如鼠标的坐标，如果是键盘事件里面就包含的是键盘事件的信息，如判断用户按下哪个按键。...
在Vue中，$event表示什么
05-29
在Vue中，$event是一个特殊变量，用于访问触发当前事件的原生DOM事件。$event只能在事件处理函数内部使用，它指向触发事件的原生DOM事件对象。 下面是一个示例，演示了如何在事件处理函数中使用$event变量： ```html <template> <div> <button @click="handleClick">点击我</button> </div> </template> <script> export default { methods: { handleClick(event) { console.log(event) // 输出原生DOM事件对象 console.log(event.target) // 输出事件触发的DOM元素 } } } </script> ``` 在上面的例子中，我们在按钮上绑定了一个 `click` 事件，并在事件处理函数中使用了 `$event` 变量，它指向触发事件的原生DOM事件对象。在事件处理函数内部，我们可以使用 `$event` 变量来访问事件对象的各种属性和方法，例如 `target` 属性表示事件触发的DOM元素。 需要注意的是，$event变量只在事件处理函数内部有效，如果需要在事件处理函数之外访问事件对象，可以将事件对象作为参数传递给事件处理函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

都挺好，刚刚好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值