当前位置：首页 > VUE

vue怎么实现事件委托

2026-02-25 08:35:30VUE

Vue 中实现事件委托的方法

事件委托是一种优化事件处理的技巧，通过将事件监听器绑定到父元素而非每个子元素上，利用事件冒泡机制统一处理子元素事件。Vue 提供了多种方式实现事件委托：

使用 `v-on` 指令结合事件对象

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

vue怎么实现事件委托

<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();
      }
    }
  }
}
</script>

动态事件绑定

结合 v-for 渲染列表时，父元素统一处理子元素事件：

vue怎么实现事件委托

<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: '选项1' },
        { id: 2, text: '选项2' }
      ]
    }
  },
  methods: {
    handleItemClick(event) {
      const id = event.target.closest('li').dataset.id;
      console.log('点击的ID:', id);
    }
  }
}
</script>

使用事件修饰符

Vue 的 .native 修饰符可用于组件上实现事件委托（Vue 2）：

<template>
  <my-list @click.native="handleListClick"></my-list>
</template>

注意事项

事件委托依赖事件冒泡机制，如果子元素阻止了事件冒泡（event.stopPropagation()），委托将失效
通过 event.target 获取触发元素时，需注意事件可能来自目标元素的子节点（如按钮内的图标），可使用 event.target.closest(selector) 精确匹配
对于动态生成的内容，事件委托比单独绑定每个元素更高效