关于Vue事件捕获【html，capture】

既然默认事件默认是以冒泡形式自下向上传递，那改变顺序呢？这就是事件的捕获关于Vue的事件冒泡示例代码默认效果依旧是自下向上传递，现在我们在父元素中添加capture，即可更改事件传递的顺序<!DOCTYPE html><html lang='zh_cn'><head><meta charset='UTF-8'><meta http-equiv=

qq_22841387

4526人浏览 · 2022-03-12 13:19:30

qq_22841387 · 2022-03-12 13:19:30 发布

Vue 中的事件冒泡与事件捕获

在前端开发中，事件传播机制是一个非常重要的概念。事件传播有两种方式：冒泡（由子元素传递到父元素）和捕获（由父元素传递到子元素）。本文将深入探讨这两种事件机制在Vue中的使用，并通过示例代码演示如何在Vue中应用事件捕获。

1. 什么是事件冒泡与事件捕获？

事件冒泡（Event Bubbling）： 当事件发生在嵌套的元素上时，事件会首先从目标元素开始触发，逐级向上传递到每一个父级元素，直到<body>，最后到达<html>。这种方式被称为事件冒泡。
事件捕获（Event Capturing）： 与事件冒泡相反，事件捕获是从最顶层的元素（比如<html>）开始，逐级向下传递，直到事件目标元素。捕获阶段能够让父级元素先处理事件。

2. Vue中的事件修饰符

在Vue中，事件修饰符提供了一种优雅的方式来控制事件的行为。常用的事件修饰符有：

.stop：阻止事件冒泡。
.prevent：阻止默认行为。
.capture：添加事件捕获模式。
.self：只有在事件在自身元素上触发时才触发回调。
.once：事件只触发一次。
.passive：提高性能的优化选项，告诉浏览器不会调用preventDefault()。

3. 示例：Vue中的事件冒泡与捕获

以下示例代码演示了如何在Vue中使用事件捕获来改变事件的默认冒泡顺序。默认情况下，事件是以冒泡的形式自下而上传递的。通过使用.capture修饰符，我们可以将事件从捕获阶段开始触发。

<!DOCTYPE html>
<html lang='zh_cn'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Vue 学习事件捕获</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 在父元素上添加 .capture 修饰符，使事件在捕获阶段触发 -->
        <div class="parent" @click.capture="doParent">
            <button @click="doThis">点击按钮</button>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                doParent() {
                    console.log("父元素的方法");
                },
                doThis() {
                    console.log("子元素的方法");
                }
            },
        })
    </script>
</body>

</html>

4. 结果解释

在上面的代码中，我们给父元素的@click事件添加了.capture修饰符：

<div class="parent" @click.capture="doParent">

默认行为（冒泡顺序）：
- 点击按钮时，默认情况下事件会首先触发子元素的点击事件（即按钮的doThis方法），然后再向上传递到父元素，触发父元素的点击事件（doParent方法）。
使用捕获模式（捕获顺序）：
- 添加了.capture修饰符后，点击按钮时，事件会首先触发父元素的点击事件（doParent方法），然后再向下传递到子元素，触发子元素的点击事件（doThis方法）。

示例结果：

事件捕获示例结果

从示例结果可以看到，添加.capture修饰符后，点击按钮的事件传递顺序变成了父元素先触发，然后再到子元素。

5. 其他常用的事件修饰符

除了.capture修饰符，Vue还提供了其他事件修饰符来更细粒度地控制事件处理：

.stop：阻止事件冒泡，事件不会再向上传递。例如：
```
<button @click.stop="doThis">点击按钮</button>
```
这样，当点击按钮时，只有子元素的事件被触发，父元素的事件不会被触发。
.prevent：阻止默认事件。例如，在表单提交时阻止页面刷新：
```
<form @submit.prevent="onSubmit">...</form>
```
.once：事件只会触发一次。例如：
```
<button @click.once="doThis">点击按钮</button>
```
这样，按钮点击事件只会触发一次，之后的点击将不再有效。

6. 总结

通过了解Vue中的事件修饰符，你可以更灵活地控制事件的传递方式和处理行为。事件捕获模式可以在某些场景下有效地先处理父元素的逻辑，而事件冒泡是浏览器的默认行为。掌握这些概念将帮助你更好地开发Vue应用，尤其是在复杂的事件交互逻辑中。

希望这篇文章能帮助你更好地理解Vue中的事件处理机制！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^