如何给一个元素增加监听事件。

例如，给一个button增加一个事件：点击之后，打印一段字符串。

注：监听事件，这四个字听起来很高大上，让人难以理解。说白了，就是：点击一下button会发生什么

在vue3中，最常用的方法就是使用：v-on。

1、基础用法

可以直接使用v-on+冒号来定义。也可以，使用@符号缩写来定义。

例如，定义了一个button，名称为aaa，绑定的事件是：鼠标点击。

点击之后发生的事情是：控制台打印 “ hahaha do something " 字符串。

代码如下所示：

<template>
  <div>

    <button v-on:click="doSomething"> aaa </button>

    <!-- 简写 -->
    <button @click="doSomething"> bbb </button>
  </div>

</template>

<script setup>

function doSomething() {
  console.log('hahaha do something');
}

</script>

<style scoped></style>

当点击button的时候，就会在控制台看到对应的输出。

一定要注意：等号后面的函数，是我们自己定义的；而等号前面的事件是内置的，不能任意改动。

除了例子中的click鼠标点击事件之外，其它常用的事件总结如下：

• 鼠标事件 click：元素被点击（鼠标左键按下并松开）时触发。 dblclick：元素被双击时触发。 mousedown：鼠标按键按下时触发。 mouseup：鼠标按键松开时触发。 mousemove：鼠标移动时触发。
• 键盘事件 keydown：键盘按键被按下时触发。 keyup：键盘按键松开时触发。 keypress：按下键盘按键并产生字符值（如字母、数字、标点符号）时触发。
• 表单事件 submit：表单提交时触发。 input：输入框内容发生改变时立即触发。 change：输入框失去焦点并且内容发生改变时触发。
• 其他常用事件 focus：元素获得焦点时触发。 blur：元素失去焦点时触发。 load：元素（如图片、脚本、框架等）加载完成时触发。 error：元素加载出错时触发。

2、一次绑定多个事件

我们可以通过花括号的形式，一次性绑定多个事件。

代码如下：

<template>
  <div>
  //mousedown表示鼠标按下  mouseup表示鼠标按下后松开
    <button v-on="{ mousedown: doThis, mouseup: doThat }">hhh</button>
  </div>

</template>

<script setup>

function doThis() {
  console.log('鼠标按下 hhh');
}

function doThat() {
  console.log('鼠标松开 hhh');
}
</script>

<style scoped></style>

结果如下图所示：

3、事件修饰符

事件修饰符的作用，就是对一个事件进行微调。

例如，鼠标点击的事件一般默认是鼠标左键触发。但可以通过修饰符right，让这个事件通过点击鼠标右键触发。

又例如，一般在点击一个链接之后，会发生跳转。

而使用修饰符prevent，就可以阻止这个跳转的发生。

代码如下：

<template>
  <div>
    <button @click.right="doSomething"> bbb </button>
    <a href="http://cn.bing.com" @click.prevent="doPrevent">hhh</a>
  </div>

</template>

<script setup>

function doSomething() {
  console.log('右键触发的 哈哈哈');
}

function doPrevent() {
  console.log('你无法跳转 哈哈哈');
}

</script>

<style scoped></style>

页面渲染成功后，我们用鼠标左键点击bbb button会发现没有任何反应，只用通过鼠标右键点击，才会在控制台看到相应的输出。

而跳转链接hhh，在点击后也没有正常跳转，而是在控制台看到了函数doPrevent里面的打印语句。

当然了，vue官方提供的事件修饰符不止这两个。

文章篇幅有限，不可能穷尽所有的修饰符。

本文的目的，是希望大家在看到相关语法的时候，不会迷茫。然后在vue官网上，所有相关的知识点。

以上就是v-on事件监听器的核心用法，感谢阅读。如需合作，欢迎联系。