当前位置：首页 > VUE

vue如何实现事件委托

2026-02-23 11:20:51VUE

Vue 中实现事件委托的方法

事件委托是一种将事件监听器添加到父元素而非每个子元素的技术，利用事件冒泡机制减少内存消耗并提高性能。Vue 提供了多种方式实现事件委托。

使用 `v-on` 和事件修饰符

通过 v-on 指令结合事件修饰符 .native 或自定义逻辑，可以在父元素上监听子元素的事件。

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

动态绑定事件处理器

通过动态绑定事件处理器，可以在父元素上统一管理子元素的事件。

<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(`Item ${id} clicked`);
      }
    }
  }
};
</script>

使用 `event.target` 和条件判断

通过检查 event.target 的属性或标签名，可以精确控制事件委托的逻辑。

<template>
  <div @click="handleDelegate">
    <button class="btn">Button 1</button>
    <button class="btn">Button 2</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleDelegate(event) {
      if (event.target.classList.contains('btn')) {
        console.log('Button clicked:', event.target.textContent);
      }
    }
  }
};
</script>

结合自定义指令

自定义指令可以更灵活地实现事件委托，尤其是在复杂的场景中。

<template>
  <div v-event-delegate="handleClick">
    <button data-action="submit">Submit</button>
    <button data-action="cancel">Cancel</button>
  </div>
</template>

<script>
export default {
  directives: {
    eventDelegate: {
      inserted(el, binding) {
        el.addEventListener('click', (event) => {
          const action = event.target.dataset.action;
          if (action) {
            binding.value(action);
          }
        });
      }
    }
  },
  methods: {
    handleClick(action) {
      console.log(`${action} action triggered`);
    }
  }
};
</script>