vue3--事件处理

监听事件

Vue使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些JS代码
比如 v-on:click=“methodName” 或使用缩写方式 @click=“methodName”

<divid="app"><button@click="counter += 1">Add 1</button><p>The button has been clicked {{counter}} times</p>
</div>

const app = Vue.createApp({data(){return {counter: 1}}
})app.mount("#app")

事件处理方法

不推荐直接把 JavaScript 代码写在 v-on 指令中，通常我们是给它提供一个可执行方法名称。

 <divid="app"><button@click="greet">Greet</button>
</div>

const app = Vue.createApp({data(){return {name: "name",}},methods: {greet(event){// method 内部的 'this' 指向当前活动实例alert("Hello" + this.name + '!')// event 是原生的 DOM eventif(event){alert(event.target.tagName)}}}})`	`app.mount("#app")

渲染效果
会先后有两次弹窗出现.
处理事件的方法会自动获得event事件本身作为参数。

给事件方法提供参数

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法（实际上就是给方法提供参数）：

<div id="app"><button @click="say('hi')">Say hi</button><button @click="say('what')">Say what</button>
</div>

 const app = Vue.createApp({data(){return {}},methods: {say(message){alert(message)}}})app.mount("#app")

有时也需要在其中访问原始的 DOM 事件，可以用特殊变量 $event 把它传入方法

多事件处理器

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<divid="app"><button @click="one($event), two($event)">Submit</button>
</div>

 const app = Vue.createApp({methods: {one(event){// 单击事件处理},two(event){// 双击事件处理}}})app.mount("#app")

事件修饰符

在事件处理程序中调用 event.preventDefault() 阻止事件的默认行为，或 event.stopPropagation() 阻止事件向上传播，是非常常见的需求。

尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节

为了解决这个需求，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once
passive

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form @submit.prevent></form><!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

使用修饰符时，顺序很重要， v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发   -->
<!-- 而不会等待 `onScroll` 完成                   -->
<!-- 这其中包含 `event.preventDefault()` 的情况   -->
<div @scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

前面都是针对鼠标点击事件的介绍。除此之外，我们往往还需要监听键盘事件。

Vue 也设计了为 v-on 或者 @ 在监听键盘事件时的按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 类型名来作为修饰符，比如：

<input @keyup.page-down="onPageDown" />

在上述示例中，事件方法只会在 $event.key 等于 ‘PageDown’ 时被调用

按键别名

kebab-case 类型名是普适的，但Vue 为最常用的键提供了别名：

.enter
.tab
.delete(捕获删除和退格键)
.esc
.space
.up
.down
.left
.right

系统功能键修饰符

可以用下面的修饰符来实现仅在按下相应控制键时才触发鼠标或键盘事件的监听器。

ctrl
alt
shift
meta

在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" /><!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

请注意功能修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 不会触发事件。

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>