Vue事件获取事件对象之event.currentTarget详解
更新时间：2024年03月24日 08:42:16 作者：姜泥断了姒
这篇文章主要介绍了Vue事件获取事件对象之event.currentTarget,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue事件获取事件对象event.currentTarget
在学习vue的时候，在进行tab栏切换的时候，突然发现不能像jquery一样$(this)获取事件，然后才发现在vue里面获取事件对象可以用event.currentTarget来获取
获取事件对象
- js的事件可以直接用this获取事件对象，
- jQuery可以使用$(this)来获取事件对象。
- vue借助事件的 event 对象 currentTarget 获取事件对象
event.currentTarget
- HTML
<ul>
<li v-for="(item,item2) in catitmlst" v-bind:index="item2" v-on:click="eventObj">
<span id="eventobj">事件对象</span>
</li>
</ul>- JS
//获取事件对象
eventObject(event){
let html = event.currentTarget
console.log(html)
//获得点击元素的前一个元素
event.currentTarget.previousElementSibling.innerHTML
//获得点击元素的第一个子元素
event.currentTarget.firstElementChild
//获得点击元素的下一个元素
event.currentTarget.nextElementSibling
//获得点击元素中id为eventobj的元素
event.currentTarget.getElementById("eventobj")
//获得点击元素的index(自定义的属性)
event.currentTarget.getAttribute('index')
//获得点击元素的父级元素
event.currentTarget.parentElement
//获得点击元素的前一个元素的第一个子元素的HTML值
event.currentTarget.previousElementSibling.firstElementChild.innerHTML
}我目前还不是特别清楚，等我彻底搞明白了，我会在重新解释一下vue获取事件对象。
IE不兼容event.currentTarget
vue开发时实现点击选中获取DOM效果使用：
JSON.parse(event.currentTarget.nextElementSibling.innerText);
但IE不兼容，改换为：
JSON.parse(event.srcElement.parentNode.lastChild.innerText);
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue项目表单校验的相关资料,前端表单校验能减少无效请求,保护后端接口,使用ElementPlus表单组件进行校验,需要准备表单对象、规则对象并进行双向绑定,用户名、密码以及协议勾选等字段都需符合特定规则,需要的朋友可以参考下2024-10-10
最近学习threejs有些时间了,就想着着手做些东西,下面这篇文章主要给大家介绍了关于vue3中如何用threejs画一些简单的几何体的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Vue实现路由跳转至外界页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue向后端传数据后端接收为null问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue中this.$router和this.$route的区别及push()方法
这篇文章主要给大家介绍了关于Vue中this.$router和this.$route的区别及push()方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
下面小编就为大家分享一篇vue.js或js实现中文A-Z排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了如何在纯前端环境下使用xlsx-js-style库进行Excel表格文件的下载,并自定义样式,还提到了使用xlsx库进行Excel表格数据的导入,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了Vue实现微信支付功能遇到的坑,本文是小编记录整理下拉的，以便日后所需，需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇浅谈vue 锚点指令v-anchor的使用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue实现获取后端接口API代码片段(已封装Service方法名)
Vue实现获取后端接口API代码片段(已封装Service方法名)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论