当前位置：首页 > VUE

vue 实现事件委托

2026-02-18 00:21:37VUE

Vue 实现事件委托的方法

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

使用 `v-on` 指令绑定父元素

通过 v-on（或 @）在父元素上监听事件，结合事件对象的 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.matches 方法，通过 CSS 选择器精准匹配目标元素。

<template>
  <ul @click="handleListClick">
    <li class="item" data-id="1">项目 1</li>
    <li class="item" data-id="2">项目 2</li>
  </ul>
</template>

<script>
export default {
  methods: {
    handleListClick(event) {
      if (event.target.matches('.item')) {
        console.log('选中项目 ID:', event.target.dataset.id);
      }
    }
  }
};
</script>

使用自定义指令封装

封装可复用的自定义指令，自动实现事件委托逻辑。

// 全局自定义指令
Vue.directive('delegate-click', {
  bind(el, binding, vnode) {
    el.addEventListener('click', (event) => {
      const handler = binding.value;
      const target = event.target;
      if (target.matches(binding.arg)) {
        handler(target, event);
      }
    });
  }
});

// 使用示例
<template>
  <ul v-delegate-click:".item"="handleItemClick">
    <li class="item" data-id="1">项目 1</li>
  </ul>
</template>