当前位置：首页 > VUE

vue实现事件委托

2026-01-19 12:36:41VUE

事件委托的概念

事件委托是一种利用事件冒泡机制的技术，将子元素的事件监听绑定到父元素上，通过事件目标（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() {
      console.log('保存数据');
    },
    deleteData() {
      console.log('删除数据');
    }
  }
};
</script>

动态绑定事件处理器

结合动态事件名和 event.target，实现更灵活的事件委托。

<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>

使用修饰符优化事件委托

Vue 的 @click.stop 或 @click.prevent 可以结合事件委托使用，避免事件冒泡干扰。

vue实现事件委托

<template>
  <div @click="handleParentClick">
    <button @click.stop="handleButtonClick">独立事件</button>
    <span>其他内容（事件委托生效）</span>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick(event) {
      if (event.target.tagName === 'SPAN') {
        console.log('事件委托处理SPAN');
      }
    },
    handleButtonClick() {
      console.log('按钮独立事件');
    }
  }
};
</script>