当前位置：首页 > VUE

vue 实现事件委托

2026-01-17 07:52:13VUE

Vue 中实现事件委托的方法

事件委托是一种通过将事件监听器绑定到父元素而非子元素的技术，利用事件冒泡机制统一处理子元素的事件。Vue 中可以通过以下方式实现：

1. 使用 v-on 和事件修饰符

在父元素上绑定事件，通过事件对象的 target 属性判断触发事件的子元素：

<template>
  <div @click="handleClick">
    <button data-action="save">Save</button>
    <button data-action="delete">Delete</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      const action = event.target.dataset.action;
      if (action === 'save') {
        this.save();
      } else if (action === 'delete') {
        this.delete();
      }
    },
    save() {
      console.log('Save action');
    },
    delete() {
      console.log('Delete action');
    }
  }
}
</script>

2. 动态事件绑定

结合 v-for 和动态事件名实现更灵活的事件委托：

<template>
  <ul @click="handleItemClick">
    <li v-for="item in items" :key="item.id" :data-id="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ]
    },
  methods: {
    handleItemClick(event) {
      const id = event.target.dataset.id;
      if (id) {
        console.log(`Clicked item ${id}`);
      }
    }
  }
}
</script>

3. 使用事件代理库

对于复杂场景，可以使用专门的事件代理库如 delegate：

import delegate from 'delegate';

export default {
  mounted() {
    delegate(this.$el, 'button', 'click', (e) => {
      console.log('Button clicked', e.target);
    });
  },
  beforeDestroy() {
    // 记得移除事件监听
    delegate.off(this.$el, 'button', 'click');
  }
}