事件监听器的捕获模式：如何掌控事件流？

vue.js

2024-03-25 11:33:40

## 事件监听器的捕获模式：掌控事件流

### 什么是事件流动？

想象一下，当你点击一个网页上的元素时，触发了一个事件。这个事件会像气泡一样，从触发元素开始向上“冒泡”到父元素，最终到达文档根元素。这就是事件流动。

### 捕获模式的工作原理

默认情况下，事件按冒泡顺序流动。但是，当你在事件监听器中使用“capture”修饰符时，事件流动顺序就会大变。

在捕获模式下，事件监听器会在事件冒泡之前触发。当一个事件发生时，它首先会被捕获模式的事件监听器处理，然后才向上冒泡到其他事件监听器。

### 捕获模式的优势

捕获模式在特定场景下有着明显优势：

阻止事件冒泡： 如果你想阻止事件冒泡到父元素，可以使用捕获模式。例如，当你需要在特定元素上执行操作，而不想触发父元素的事件监听器时。
捕获全局事件： 捕获模式可以帮助你捕获全局事件，如键盘事件或鼠标移动事件。这些事件通常在文档根元素上触发，使用捕获模式让你可以第一时间进行处理。
提升性能： 在某些情况下，捕获模式可以提升性能。由于事件不再需要向上冒泡到父元素，这可以减轻浏览器的负担。

### 使用“capture”修饰符

使用“capture”修饰符非常简单。只需在事件监听器名称后面加上“.capture”即可。例如：

<div v-on:click.capture="doSomething">...</div>

上面的代码表示，当用户点击<div>元素时，事件监听器“doSomething”将在捕获模式下触发。

### 示例

假设有一个嵌套元素的组件：

<template>
  <div id="parent">
    <div id="child">
      <button @click="doSomething">按钮</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      console.log("按钮被点击了！");
    }
  }
};
</script>

如果你想在点击按钮时同时触发父元素和子元素的事件监听器，可以使用捕获模式：

<template>
  <div id="parent">
    <div id="child">
      <button @click.capture="doSomething">按钮</button>
    </div>  
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      console.log("按钮被点击了！");
    }
  }
};
</script>