vue实现事件委托

事件委托的原理

事件委托利用事件冒泡机制，将子元素的事件监听绑定到父元素上。通过 event.target 判断实际触发事件的子元素，减少重复事件绑定，提升性能。

Vue 中的实现方式

方法一：通过 v-on 和 event.target

在父元素上使用 v-on 绑定事件，通过 event.target 判断目标元素：

<template>
  <div @click="handleClick">
    <button data-action="save">保存</button>
    <button data-action="delete">删除</button>
  </div>
</template>

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

方法二：动态绑定事件处理器

结合 v-for 动态生成子元素时，直接在父元素上统一处理事件：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ]
    };
  },
  methods: {
    handleItemClick(event) {
      const id = event.target.dataset.id;
      if (id) {
        console.log('选中项的ID:', id);
      }
    }
  }
}
</script>

注意事项

• 事件冒泡：确保子元素事件会冒泡到父元素。若子元素阻止了冒泡（如调用了 event.stopPropagation()），事件委托会失效。
• 目标元素检查：通过 event.target 或 event.currentTarget 精确判断触发事件的元素，避免误判嵌套结构。
• 性能优化：适合动态列表或大量子元素的场景，减少内存占用。

扩展：自定义指令实现

可通过自定义指令简化事件委托逻辑：

Vue.directive('delegate', {
  bind(el, binding) {
    el.addEventListener(binding.arg, (event) => {
      const handler = binding.value;
      const target = event.target.closest(binding.arg);
      if (target && el.contains(target)) {
        handler(event);
      }
    });
  }
});

使用方式：

<div v-delegate:click="handleDelegateClick">
  <button data-action="save">保存</button>
</div>