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) {  // 获取事件对象e
            console.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>