Vue事件处理

发表于 分类于

事件简介

有效地管理和处理事件，可以实现交互式的Vue应用程序，Vue 3中事件处理的主要方面：

  • 事件绑定：你可以使用@符号或v-on指令来绑定事件。例如，@click或v-on:click用于点击事件。

  • 事件处理方法：事件处理方法是在Vue组件的methods属性中定义的JavaScript函数。这些方法可以在Vue模板中使用，例如：

    1
    <button @click="handleClick">点击我</button>

    在上面的例子中，handleClick是一个在methods中定义的方法。

  • 事件参数：你可以通过在事件处理方法中传递一个特殊的参数$event来访问事件对象。例如：

    1
    <button @click="handleClick($event)">点击我</button>

    在方法中，你可以像这样访问事件对象：

    1
    2
    3
    4
    5
    methods: {
      handleClick(event) {
        // 使用 event 对象
      }
    }

  • 修饰符：Vue 3也支持事件修饰符，用于修改事件处理的行为。例如，.stop修饰符可以阻止事件冒泡，.prevent修饰符可以阻止默认行为。示例：

    1
    2
    <a @click.stop="doSomething">阻止冒泡</a>
    <form @submit.prevent="submitForm">阻止表单提交</form>

  • 自定义事件：你可以使用$emit方法触发自定义事件，然后在父组件中监听这些事件。这允许父子组件之间的通信。示例：

    在子组件：

    1
    2
    3
    4
    5
    methods: {
      sendDataToParent() {
        this.$emit('custom-event', data);
      }
    }

    在父组件中监听：

    1
    <child-component @custom-event="handleCustomEvent"></child-component>

    在父组件的methods中处理自定义事件。

事件绑定与参数

我们可以通过在事件处理方法中传递一个特殊的参数$event来访问事件对象。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 -event参数</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <button @click="one($event),two($event)">点击</button>
</div>
 
<script>
	app={
		methods:{
			one(event){
				alert('One function');
			},
			two(event){
			    //弹出元素的类型
				alert(event.target.tagName);
			}
		}
	
	}
	
	Vue.createApp(app).mount('#app')
	
</script>
</body>
</html>

  • 在Vue中，$event 参数不是必须的。当你在使用 @click 或其他事件处理器时，Vue会默认将事件对象作为参数传递给事件处理函数，所以你可以不显式传递 $event 参数。

  • 你可以将事件处理函数定义为接受参数，但并不需要在模板中显式传递 $event。例如，以下代码与你的代码效果相同：

1
<button @click="one, two">点击</button>
1
2
3
4
5
6
7
8
9
10
app = {
  methods: {
    one(event) {
      alert('One function');
    },
    two(event) {
      alert(event.target.tagName);
    }
  }
}

事件修饰符

Vue 3 提供了一些事件修饰符，用于在处理 DOM 事件时进行额外的控制和操作。这些事件修饰符是以符号”.”开头的特殊后缀，它们可以用来改变事件的行为。以下是一些常见的事件修饰符及其用途：

  1. .stop 修饰符：

    • 示例：@click.stop
    • 用途：阻止事件冒泡，不让事件继续向上传播。

  2. .prevent 修饰符：

    • 示例：@submit.prevent
    • 用途：阻止默认行为，通常用于表单提交，防止页面刷新。

  3. .capture 修饰符：

    • 示例：@focus.capture
    • 用途：添加事件监听器在捕获阶段执行，而不是在冒泡阶段执行，默认是在冒泡阶段执行。

  4. .self 修饰符：

    • 示例：@click.self
    • 用途：只有点击事件发生在元素本身上时才触发事件，而不是发生在子元素上。

  5. .once 修饰符：

    • 示例：@mousedown.once
    • 用途：事件只会触发一次，之后自动解绑事件监听器。

  6. .passive 修饰符：

    • 示例：@scroll.passive
    • 用途：告知浏览器此事件监听器内部不会调用 preventDefault()，可以提高页面滚动性能。

  7. .native 修饰符：

    • 示例：@keydown.native
    • 用途：监听组件根元素的原生 DOM 事件，而不是组件内部的事件。

这些事件修饰符可以与 @event 监听器一起使用，例如 @click.prevent，以提供更精细的事件处理控制。

.prevent

.prevent 是Vue中的事件修饰符之一，用于阻止默认事件行为。通常情况下，浏览器会对某些事件（例如表单的提交、链接的点击等）执行默认的行为。.prevent 可以在触发事件时阻止这些默认行为的发生。

以下是一个使用.prevent的完整例子，以阻止表单提交的默认行为：

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
33
34
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue .prevent 示例</title>
  <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData" />
    <button type="submit">提交</button>
  </form>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      formData: ''
    };
  },
  methods: {
    submitForm() {
      // 执行表单提交逻辑，这里仅演示阻止默认行为
      alert('表单已提交，内容为：' + this.formData);
    }
  }
});

app.mount('#app');
</script>
</body>
</html>

在这个例子中，当用户点击表单中的提交按钮时，.prevent修饰符会阻止表单的默认提交行为，而不会导致页面刷新。代替默认行为，会执行submitForm方法，弹出一个警告框显示表单的内容。使用.prevent修饰符可以避免不必要的页面刷新或默认行为，让你有更多的控制权来处理事件。

按键修饰符

Vue 提供了一些按键修饰符，用于监听键盘事件时过滤特定的按键。以下是常用的按键修饰符：

  1. .enter：监听回车键（Enter）。
1
<input @keyup.enter="submitForm">
  1. .tab：监听制表键（Tab）。
1
<input @keyup.tab="nextField">
  1. .delete 或 .backspace：监听删除键（Delete 或 Backspace）。
1
<input @keyup.delete="deleteItem">
  1. .esc：监听逃脱键（Esc）。
1
<input @keyup.esc="cancelEdit">
  1. .space：监听空格键（Space）。
1
<button @keyup.space="startGame">开始游戏</button>
  1. .up、.down、.left、.right：分别监听方向键（上、下、左、右）。
1
2
3
4
<div @keydown.up="moveUp"></div>
<div @keydown.down="moveDown"></div>
<div @keydown.left="moveLeft"></div>
<div @keydown.right="moveRight"></div>
  1. .ctrl、.alt、.shift、.meta：分别监听 Ctrl、Alt、Shift 和 Meta（Windows 键或 Command 键）键的组合。
1
2
3
4
<input @keydown.ctrl="undo">
<input @keydown.alt="toggleMenu">
<input @keydown.shift="selectMultipleItems">
<input @keydown.meta="openCommandPalette">

实践案例

当使用 .enter 修饰符时，事件只会在用户按下回车键时触发。以下是一个完整的示例：

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 按键修饰符示例 </title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <input @keyup.enter="handleEnterKey" placeholder="按下回车键触发事件">
</div>

<script>
const app = Vue.createApp({
  methods: {
    handleEnterKey() {
      alert('回车键触发了事件！');
    }
  }
});

app.mount('#app');
</script>
</body>
</html>

在这个示例中，我们创建了一个 Vue 应用，然后使用 @keyup.enter 修饰符来监听键盘按键事件。当用户在输入框中按下回车键时，handleEnterKey 方法会被触发，弹出一个警告框，说明回车键触发了事件。

鼠标修饰符

Vue 提供了一些鼠标事件的修饰符，用于监听鼠标事件时进行控制和过滤。以下是常用的鼠标事件修饰符：

  1. .left：监听鼠标左键点击事件。
1
<button @click.left="submitForm">提交</button>
  1. .right：监听鼠标右键点击事件。
1
<div @contextmenu.right.prevent="showContextMenu"></div>
  1. .middle：监听鼠标中键点击事件。
1
<div @click.middle="openInNewTab"></div>

实践案例

当使用 .right 修饰符时，事件只会在鼠标右键点击时触发。以下是一个完整的示例：

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 鼠标修饰符</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <button @click.left="handleRightClick">左键点击</button>
</div>

<script>
const app = Vue.createApp({
  methods: {
    handleRightClick() {
      alert('左键点击触发了事件！');
    }
  }
});

app.mount('#app');
</script>
</body>
</html>

在这个示例中，我们创建了一个 Vue 应用，并使用 @click.right 修饰符来监听鼠标左键的点击事件。当用户使用鼠标左键点击按钮时，handleRightClick 方法会被触发，弹出一个警告框，说明左键点击事件已经触发。