vue中$event使用之获取当前元素及相关元素
更新时间：2023年10月20日 11:28:10 作者：酷酷的橙007
这篇文章主要介绍了vue中$event使用之获取当前元素及相关元素,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
$event使用之获取当前元素及相关元素
对于常见的事件，比如点击事件，第一个参数是事件本身，另外，在实际项目中，我们可能需要获取事件执行的元素或相关元素，在这里总结一下。
例如：点击事件
<button @click = “clickfun($event)”>点击</button>
通过事件获取元素：
methods: {
clickfun(e) {
// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素
# 获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
# 获得点击元素的第一个子元素
e.currentTarget.firstElementChild
# 获得点击元素的下一个元素
e.currentTarget.nextElementSibling
# 获得点击元素中id为string的元素
e.currentTarget.getElementById("string")
# 获得点击元素的string属性
e.currentTarget.getAttributeNode('string')
# 获得点击元素的父级元素
e.currentTarget.parentElement
# 获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML
}
}
vue关于$event的通俗理解
通过对$event的多次打印结果，可见：
- $event是指当前触发的是什么事件（鼠标事件，键盘事件等）
- $event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素
下面是例子：
<button @click="console.log($event)" name="哈哈">单击</button>
由于鼠标点击，所以触发鼠标单击事件，打印出来的是事件，如下图：
展开后确实有target属性，且target说明了这是button：
实际上展开target就可以看到更具体的信息，这里不做演示，其实也就是这个button的各种属性等等，直接就是这dom元素。
且看下面这段代码，直接打印出target：
<button @click="console.log($event.target)" name="哈哈">单击</button>
可见打印出来的值就是这个元素本身
我们可尝试获取其属性值：
<button @click="console.log($event.target.name)" name="哈哈">单击</button>
所以我们可以利用$event进行一些函数传值之类的特殊操作
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
基于vue3+TypeScript实现一个简易的Calendar组件
最近在学习 react,在学习到使用 react 开发 Calendar 组件的时候,突然联想到使用 vue 进行 Calendar 功能的实现,因为目前使用的技术栈是 vue,刚好可以加深下对 vue3 和 ts 的使用印象,所以本文给大家介绍了基于vue3+TypeScript实现一个简易的Calendar组件2024-05-05
本篇文章主要介绍了vue引入swiper插件的使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue点击页面空白处实现保存功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
文章主要讲述了在Vue中插入base64图片的方法,包括在模板中写入img标签、在methods中写入事件以及调用后端接口,作者分享了个人经验,希望能为读者提供参考2026-05-05
这篇文章主要为大家详细介绍了五种Vue实现加减乘除运算的方法,文中的示例代码简洁易懂,对我们深入了解vue有一定的帮助,需要的可以了解下2023-08-08
这篇文章主要介绍了vue下使用nginx刷新页面404的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要给大家介绍了关于vue3+element Plus实现表格前端分页的相关资料,虽然很多时候后端会把分页,搜索,排序都做好,但是有些返回数据并不多的页面,或者其他原因不能后端分页的通常会前端处理,需要的朋友可以参考下2023-08-08
axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端，这篇文章主要介绍了Vue中axios的基本用法及axios的特征和使用注意细节，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了ant-design-vue按需加载的坑的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了详解在vue-test-utils中mock全局对象，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论