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进行一些函数传值之类的特殊操作
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现拖拽窗口功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章给大家介绍了vue2.0父子组件及非父子组件之间的通信方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了vue中v-html妙用及空白行消除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章介绍了Vue.js中v-for指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要为大家介绍了create vite 实例源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Vue如何提升首屏加载速度实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果,下面这篇文章主要给大家介绍了关于Vue实用功能之实现拖拽元素、列表拖拽排序的相关资料,需要的朋友可以参考下2022-10-10
本文主要给大家介绍基于vue的分页原生写法，代码分为html部分和js部分，简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-03-03
uni-app如何设置页面全局背景色,其实非常简单,一句话即可,但有时候也会踩一些坑,这篇文章主要给大家介绍了关于uniapp中设置全局页面背景色的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了Vue实现简单登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
最新评论