vue实现事件捕获

Vue 实现事件捕获的方法

在 Vue 中，默认情况下事件是通过冒泡机制传递的。如果需要实现事件捕获，可以通过原生 JavaScript 的事件监听方式或 Vue 的自定义指令来实现。

使用原生 JavaScript 的事件监听

在 Vue 组件中，可以通过 addEventListener 的第三个参数设置为 true 来启用事件捕获模式。

export default {
  mounted() {
    this.$el.addEventListener('click', this.handleClick, true);
  },
  methods: {
    handleClick(event) {
      console.log('捕获阶段触发的事件', event.target);
    }
  },
  beforeDestroy() {
    this.$el.removeEventListener('click', this.handleClick, true);
  }
}

使用 Vue 自定义指令

可以创建一个自定义指令来简化事件捕获的实现。

Vue.directive('capture', {
  bind(el, binding) {
    const eventType = binding.arg || 'click';
    const handler = binding.value;
    el.addEventListener(eventType, handler, true);
  },
  unbind(el, binding) {
    const eventType = binding.arg || 'click';
    const handler = binding.value;
    el.removeEventListener(eventType, handler, true);
  }
});

在组件中使用自定义指令：

<template>
  <div v-capture:click="handleCaptureClick">
    点击我触发捕获事件
  </div>
</template>

<script>
export default {
  methods: {
    handleCaptureClick(event) {
      console.log('捕获事件触发', event.target);
    }
  }
}
</script>

注意事项

• 事件捕获是从外向内传播的，而冒泡是从内向外传播的。
• 使用原生事件监听时，需要在组件销毁时手动移除监听器，避免内存泄漏。
• 自定义指令可以封装复用逻辑，适合在多个组件中使用捕获事件的需求。