Vue中获取当前元素事件的event对象用法（二）——target-当前点击元素 & currentTarget-绑定事件元素 & 获取兄弟元素、子元素、父元素
vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。具体用法如下：
可以通过$event进行对dom元素的获取
1、获取元素
示例
<template><button @click = “onClick('hello',$event)”>点击</button><!-- $event作为参数，位置可任意 --><!-- <button @click="onClick($event, 'hello')">获取事件对象</button> --></template><script>export default {methods: {onClick(str, e) { // 获取事件对象econsole.log(str, e);// e.target 是你当前点击的元素// e.currentTarget 是你绑定事件的元素// 1、我们可以对获取的元素进行操作，就像原生js那样，如下：e.srcElement.style.background="red";//2、可以对标签自身的属性进行修改，比如说改变button按钮的文字值，这个时候是使用的$event下面的textContent进行修改。e.textContent="新内容";}}}</script>
其中srcElement就是当前这个标签元素，可以根据此属性来获取当前点击事件的标签元素。
3、也可以通过$event获取标签自定义的属性值
<button data-get="数据按钮" @click="getRvent($event)">获取事件对象</button>
这个button按钮标签有一个自定义的属性data-get，这时候我们可以根据$event的属性target.dataset.get属性进行获取。
js
onClick(e) {console.log(e.dataset.get) // 数据按钮}
其实有时候我们可以用元素本身自带的属性进行操作，摒弃添加class等操作，减少代码的冗余性，细化代码。
2、修改样式
<script>methods:{// obj就是传入的$event// 鼠标放上 修改当前tr标签的背景色changeOver:function (obj) {obj.currentTarget.style.background="rgb(244, 250, 251)";},// 鼠标离开changeOut:function (obj) {obj.currentTarget.style.background="white";}} </script>
3、获取兄弟元素、子元素、父元素
<template><div><button @click="check($event)">点击</button></div></template><script>export default {data(){return{}},methods:{check(event) {console.log(event)event.target // 是你当前点击的元素event.currentTarget // 是你绑定事件的元素// 获得点击元素的前一个元素event.currentTarget.previousElementSibling.innerHTML// 获得点击元素的第一个子元素event.currentTarget.firstElementChild// 获得点击元素的下一个元素event.currentTarget.nextElementSibling// 获得点击元素中id为string的元素event.currentTarget.getElementById("string")// 获得点击元素的string属性event.currentTarget.getAttributeNode('string')// 获得点击元素的父级元素event.currentTarget.parentElement// 获得点击元素的前一个元素的第一个子元素的HTML值event.currentTarget.previousElementSibling.firstElementChild.innerHTML}}}</script>
Vue中获取当前元素事件的event对象用法（二）——target-当前点击元素 currentTarget-绑定事件元素 获取兄弟元素 子元素 父元素
