VUE3 事件的处理

在 Vue.js 中，事件处理是通过 v-on 指令来实现的，允许我们在 DOM 元素上监听用户交互并执行相应的操作。通过事件绑定，Vue.js 可以响应用户的点击、输入、提交等行为。

1. 基本的事件绑定

v-on 指令用于监听事件，并在事件发生时执行方法。

语法：

v-on:event="method"

例如，监听点击事件：

<div id="app"><button v-on:click="handleClick">Click Me</button>
</div><script>new Vue({el: '#app',methods: {handleClick() {alert('Button clicked!');}}});
</script>

在这个例子中，v-on:click 会监听点击事件，并执行 handleClick 方法。

2. 事件修饰符

Vue.js 提供了许多事件修饰符，可以让你更方便地控制事件的行为。常用的修饰符包括：

2.1 `.stop`：阻止事件冒泡

使用 .stop 修饰符可以阻止事件冒泡。

<div id="app"><button v-on:click.stop="handleClick">Click Me</button>
</div><script>new Vue({el: '#app',methods: {handleClick() {alert('Button clicked!');}}});
</script>

这里，.stop 修饰符会阻止事件冒泡到父元素。

2.2 `.prevent`：阻止默认行为

使用 .prevent 修饰符可以阻止事件的默认行为。例如，阻止表单提交：

<div id="app"><form v-on:submit.prevent="handleSubmit"><button type="submit">Submit</button></form>
</div><script>new Vue({el: '#app',methods: {handleSubmit() {alert('Form submission prevented!');}}});
</script>

在这个例子中，.prevent 阻止了表单的默认提交行为，防止页面刷新。

2.3 `.capture`：使用事件捕获模式

默认情况下，事件是通过冒泡机制触发的，.capture 修饰符可以改为使用事件捕获模式。

<div id="app"><button v-on:click.capture="handleClick">Click Me</button>
</div><script>new Vue({el: '#app',methods: {handleClick() {alert('Captured click event!');}}});
</script>

.capture 修饰符会使得事件在捕获阶段触发，而不是在冒泡阶段。

2.4 `.once`：事件只触发一次

.once 修饰符确保事件只触发一次，之后就会被自动移除。

<div id="app"><button v-on:click.once="handleClick">Click Me Once</button>
</div><script>new Vue({el: '#app',methods: {handleClick() {alert('Button clicked once!');}}});
</script>

3. 修饰符组合

你还可以组合多个修饰符，例如，阻止默认行为并且只触发一次事件：

<div id="app"><button v-on:click.prevent.once="handleClick">Click Me</button>
</div><script>new Vue({el: '#app',methods: {handleClick() {alert('Event triggered!');}}});
</script>

4. 事件监听器的简写语法

Vue.js 提供了一种更简洁的事件绑定语法，使用 @ 作为 v-on 的缩写。

例如：

<div id="app"><button @click="handleClick">Click Me</button>
</div><script>new Vue({el: '#app',methods: {handleClick() {alert('Button clicked!');}}});
</script>

@click 是 v-on:click 的简写。

5. 事件对象

Vue.js 还提供了对原生 DOM 事件对象的访问。你可以通过方法中的参数来获取事件对象，类似于原生 JavaScript。

<div id="app"><button @click="handleClick">Click Me</button>
</div><script>new Vue({el: '#app',methods: {handleClick(event) {console.log(event);  // 访问原生事件对象}}});
</script>

在这个例子中，handleClick 方法的参数 event 就是原生 JavaScript 的事件对象。

6. 传递参数给事件处理器

有时你可能想要将额外的参数传递给事件处理器。你可以通过使用箭头函数或者 .bind 来实现这一点。

示例 1：使用箭头函数

<div id="app"><button @click="handleClick('Hello')">Click Me</button>
</div><script>new Vue({el: '#app',methods: {handleClick(message) {alert(message);}}});
</script>

示例 2：使用 `.bind` 传递参数

<div id="app"><button @click="handleClick.bind(null, 'Hello')">Click Me</button>
</div><script>new Vue({el: '#app',methods: {handleClick(message) {alert(message);}}});
</script>

7. 事件修饰符总结

修饰符	功能
`.stop`	阻止事件冒泡
`.prevent`	阻止事件的默认行为
`.capture`	使用事件捕获模式
`.once`	事件只触发一次
`.passive`	为事件添加 `passive` 标志（优化滚动性能）