框架初学者指南：在 Vue 实战中使用 $event

前端

2024-02-13 21:37:33

在 Vue 实战中，我们经常需要处理各种各样的事件，比如按钮点击、表单提交、鼠标移动等等。为了能够对这些事件做出响应，Vue 提供了一个非常强大的工具——$event。

1. $event 简介

event 是一个 JavaScript 对象，它包含了事件的相关信息，例如事件类型、点击位置等等。当一个事件触发时，Vue 会将 event 对象作为参数传递给事件处理函数。

2. $event 的属性

$event 对象包含了丰富的属性，我们最常使用的是以下几个：

type ：事件类型，比如 click、mouseover、keydown 等。
target ：触发事件的元素。
currentTarget ：当前正在处理事件的元素。
clientX ：鼠标指针在视窗中的水平位置。
clientY ：鼠标指针在视窗中的垂直位置。
offsetX ：鼠标指针在触发元素中的水平位置。
offsetY ：鼠标指针在触发元素中的垂直位置。

3. $event.target

$event.target 属性非常有用，它指向触发事件的 DOM 元素。我们可以通过它来操作 DOM 元素，比如获取元素的属性、修改元素的样式、添加或移除元素等等。

4. 侦听器

为了能够对事件做出响应，我们需要在 Vue 组件中添加事件侦听器。事件侦听器的语法如下：

<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.target)
    }
  }
}
</script>

在上面的代码中，我们为按钮添加了一个 click 事件侦听器。当按钮被点击时，handleClick 方法就会被调用，而 event 对象作为参数被传递给 handleClick 方法。

5. 事件修饰符

Vue 还提供了一些事件修饰符，可以帮助我们简化事件处理。最常用的事件修饰符有以下几个：

.stop ：阻止事件冒泡。
.prevent ：阻止事件的默认行为。
.capture ：在捕获阶段捕获事件。
.self ：只处理当前元素上的事件。
.once ：只处理一次事件。

例如，我们可以使用 .stop 修饰符来阻止按钮点击事件冒泡到父元素：

<template>
  <button @click.stop="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.target)
    }
  }
}
</script>