vue中,element UI 时间控件（二）01——Vue中的$event详解

vue中,element UI 时间控件（二）01——Vue中的$event详解

$event是指当前触发的是什么事件（鼠标事件，键盘事件等）

$event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素

1、$event系列功能

下面是例子:

<button @click="getData($event)" name="哈哈">按钮</button>

由于鼠标点击，所以触发鼠标单击事件，打印出来的是事件，如下图：

展开后确实有target属性，且target说明了这是button：

实际上展开target就可以看到更具体的信息，这里不做演示，其实也就是这个button的各种属性等等，直接就是这dom元素。

且看下面这段代码，直接打印出target：

<button @click="getData($event.target)" name="哈哈">按钮</button>

效果

可见打印出来的值就是这个元素本身
我们可尝试获取其属性值

<button @click="getData($event.target.name)" name="哈哈">按钮</button>

效果

我们也可以利用$event进行一些函数传值之类的特殊操作

2、vue3.0实例-$event

<template>
<button @click="getData($event)" name="哈哈">按钮</button>
</template>

<script>
export default {
    setup() {
        const getData = (e) => {
            console.log(e)
        }
        return {
            getData
        }
    }
}
</script>