Vue的学习 —— ＜vue事件处理＞

前言

事件指的就是用户和网页交互的行为，这些行为，包括：鼠标单击、鼠标双击、键盘按下、抬起等。为了简化开发，Vue为开发者提供了事件修饰符，它可以与v-on配合使用，以便于对事件进行控制和处理，让开发者更专注于逻辑。事件修饰符用于修饰事件的行为，写在事件名称之后，多个事件修饰符可以串联使用。

事件修饰符

Vue3中的事件修饰符，如 .prevent、.stop、.once等

以下是事件修饰符可以实现的一些功能：

• 阻止默认事件行为

• 阻止事件冒泡

• 事件捕获

• 使事件只触发一次

• 使DOM元素只有自身触发事件时才执行事件方法

• 监听滚动事件

• 捕获特定按键

• 捕获鼠标按键

正文

一、阻止默认事件行为

通过.prevent事件修饰符可以实现阻止默认事件行为的功能。例如，在单击<a>标签时页面会自动跳转，这就是<a>标签的默认事件行为。在实际开发中，如果默认事件行为与事件发生冲突，可以使用.prevent事件修饰符阻止默认事件行为，示例代码如下：

<a href="test.html" v-on:click.prevent>阻止默认行为</a>

二、阻止事件冒泡

通过.stop事件修饰符可以实现阻止事件冒泡的功能，示例代码如下：

<template>
  <div v-on:click="show('我是父元素的事件')">
    <button v-on:click="show('我是子元素的事件')">事件冒泡</button>
    <button v-on:click.stop="show('我是子元素的事件')">阻止事件冒泡</button> <!-- -->
  </div>
</template>
<script setup>
let show = message => console.log(message) 
</script>

三、事件捕获

通过.capture事件修饰符可以实现事件捕获的功能，示例代码如下：

<template>
  <div v-on:click.capture="show('我是父元素的事件')">
    <button v-on:click="show('我是子元素的事件')">事件捕获</button>
  </div>
</template>
<script setup>
let show = message =>  console.log(message)
</script>

四、使事件只触发一次

通过.once事件修饰符可以实现使事件只触发一次的功能。.once事件修饰符用于阻止事件的多次触发，让事件只触发一次，示例代码如下：

<template>
  <button v-on:click.once ="show('我是当前元素的单击事件且只执行一次')">只执行一次</button>
</template>
<script setup>
let show = message => console.log(message)
</script>

五、使DOM元素只有自身触发事件时才执行事件方法

通过.self事件修饰符可以实现只有DOM元素自身触发事件时才执行事件方法的功能，示例代码如下：

<template>
  <div v-on:click="show('我是祖先元素的事件')">祖先元素
    <div v-on:click.self="show('我是父元素的事件')">父元素
      <div v-on:click="show('我是子元素的事件')">子元素</div>
    </div>
  </div>
</template>
<script setup>
let show = message => console.log(message)
</script>

六、监听滚动事件

通过.passive事件修饰符可以实现监听滚动事件的功能。.passive事件修饰符主要用于优化移动端设备的滚屏性能。添加.passive事件修饰符后会优先响应滚动事件而不是滚动事件的回调函数，从而可提升性能。使用.passive事件修饰符的示例代码如下：

<div v-on:scroll.passive="onScroll"></div>

七、捕获特定按键

vue提供了一些用于修饰键盘事件的修饰符，使用它们可以捕获特定按键，其中常用的修饰符如下。

• .enter：捕获Enter键。

• .esc：捕获Esc键。

• .tab：捕获Tab键。

• .delete：捕获Delete和Backspace键。

• .ctrl：捕获Ctrl键。

• .alt：捕获Alt键。

• .shift：捕获Shift键

• .meta：在MacOS系统的键盘上捕获command键；在Windows系统的键盘上捕获Windows徽标键。

如果想实现只有按下Enter键时才能触发事件，可以通过.exact修饰符来实现，该修饰符允许控制由精确的系统修饰符组合触发的事件。修改input元素实现仅有Enter键被按下的时候才触发，示例代码如下：

<input type="text" v-on:keyup.enter.exact="submit">

八、捕获鼠标按键

Vue中提供了一些用于捕获鼠标按键的事件修饰符，其中常用的修饰符如下。

• .left：捕获鼠标左键。

• .middle：捕获鼠标中键。

• .right：捕获鼠标右键。

接下来以捕获鼠标左键为例，演示鼠标按键修饰符的使用，示例代码如下：

<template>
  <button v-on:click.left="show('捕获到鼠标左键')">按钮</button>
</template>
<script setup>
let show = message => console.log(message)
</script>

九、事件对象

事件对象是用来获取当事件发生时，事件源的一些信息（状态），例如，当鼠标移动事件发生时，想获得鼠标的坐标等，就通过事件对象来获得。在Vue中当事件发生时，会自动给事件处理函数传递一个$event事件对象，不需要手动传递，只需要接收即可。

下面演示捕获鼠标移动事件并输出相关信息，示例代码如下：

<!-- Home.vue文件 -->
<template>
    <div class="home-container">
      <h3 @mousemove="move">Home组件</h3>
      
    </div>
</template>
<script setup>
const move = (event) => {
  console.log(event)
}
</script>

将鼠标移动到Home组件div中，页面效果如下：

课后作业

在页面中设计一个交互场景，其中包含一个初始化值为0的计数器变量 count 以及一个可操作的按钮组件。当用户鼠标右键点击该按钮时，要求页面上的 count 变量能够自动递增1，并实时更新显示在页面上，以此来展现Vue.js响应式系统中的数据驱动视图更新特性。

参考实现：

<template>
    <div>
        {{ count }}
        <button name="加1" @click.right="addCount"></button>
    </div>
</template>
<style>
</style>
<script setup>
import {ref} from 'vue'
const count = ref(0)
const addCount = () => count.value += 1
</script>