$event是一个对象 $event是指当前触发的是什么事件（鼠标事件，键盘事件等） $event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素。
vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。event.srcElement就是当前这个标签元素，可以根据此属性来获取当前点击事件的标签元素，也可以通过$event获取标签自定义的属性值。
$event的用法
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
获得点击input的值
e.currentTarget.value
判断input是否选中
e.currentTarget.checked
$event 获取自定义属性值 :data-id=“”
e.target.dataset.id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
通过event获取元素
console.log(event.target);//当前元素点击的子节点
console.log(event.currentTarget);//当前Vue元素
var thisDIV = event.currentTarget;//当前元素
thisDIV.style.color="#fff";//修改当前元素，文字颜色
thisDIV.lastElementChild.style.color="#fff";//修改最后一个子节点，文字颜色
console.log(thisDIV.getAttribute('name'));//获取html元素属性值
1
2
3
4
5
6
2
3
4
5
6
组件中的$event
子组件
<template>
<div class="panmourenseo" @click="e_Click">
</div>
</template>
<script>
export default {
name: 'PanSeo',
props: {
msg: String
},
methods: {
e_Click(event) {
this.$emit('click',event); // 将event对象传递出去
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
父组件
<template>
<div id="app">
<PanSeo @click="e_ChildClick('PanSeo',$event)"/>
</div>
</template>
<script>
import PanSeo from './components/PanSeo.vue'
export default {
name: 'App',
components: {
PanSeo
},
methods:{
e_ChildClick(value,event){
console.log("子组件点击事件：",value,event); //
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
