Vue中的$event

$event是Vue中的一个特殊变量，它代表当前触发的事件对象。在事件处理函数中，可以通过$event来访问事件对象的属性和方法，比如鼠标位置、键盘按键等。同时，$event也可以用来阻止事件的默认行为或者停止事件的传播。

相关问题

Vue修改$event

在 Vue 中，可以通过修改 $event 对象来对事件进行一些自定义操作。但是需要注意的是，$event 是一个只读属性，不能直接修改。正确的方式是使用修饰符 `.prevent` 或者 `.stop` 来阻止默认行为或者停止事件冒泡，然后通过访问原始事件对象来进行修改。

例如，在一个点击事件中，可以这样访问原始事件对象：

<button @click="onClick">点击</button>

...

methods: {
  onClick(event) {
    event.preventDefault(); // 阻止默认行为
    event.stopPropagation(); // 停止事件冒泡
    event.target.innerText = '已点击'; // 修改事件目标的文本内容
  }
}

需要注意的是，在模板中直接访问原始事件对象会造成性能问题，因为每次访问都需要创建一个新的对象。如果需要多次访问事件对象，可以使用 `$event` 属性并传递给方法：

<button @click="onClick($event)">点击</button>

...

methods: {
  onClick(event) {
    event.preventDefault(); // 阻止默认行为
    event.stopPropagation(); // 停止事件冒泡
    event.target.innerText = '已点击'; // 修改事件目标的文本内容
  }
}

这样做可以避免额外的对象创建，提高性能。

vue属性$event

在Vue中，$event＊＊＊事件的回调函数中传入参数$event，可以获取到该事件的事件对象。

在上述代码中，通过@click事件绑定了一个名为getData的方法，并在方法中传入了$event参数。当按钮被点击时，getData方法会被调用，并且$event参数会被自动传入，可以通过打印$event参数来查看该事件的事件对象。

在第二种引用中，$event是获取的dom元素，即MouseEvent鼠标点击的这个按钮元素。

而在第三种引用中，console.log($event.srcElement)打印出的是$event参数的srcElement属性，即事件对象的目标元素。