vue 实现事件委托

事件委托的基本概念

事件委托是一种利用事件冒泡机制的技术，将子元素的事件监听器绑定到父元素上，通过事件对象的 target 属性判断实际触发事件的子元素。这种方式能减少内存消耗，尤其适合动态生成的子元素列表。

Vue 中实现事件委托的步骤

绑定事件到父元素
在 Vue 模板中，将事件监听器（如 @click）绑定到父元素而非子元素。例如：

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

通过事件对象识别目标元素
在事件处理函数中，通过 event.target 获取实际触发事件的子元素，并通过自定义属性（如 data-action）区分不同操作：

methods: {
  handleClick(event) {
    const action = event.target.dataset.action;
    if (action === 'save') {
      this.saveData();
    } else if (action === 'delete') {
      this.deleteData();
    }
  }
}

动态生成子元素的场景

对于通过 v-for 动态生成的列表，事件委托能避免为每个子元素单独绑定事件：

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

methods: {
  handleListItemClick(event) {
    const itemId = event.target.dataset.id;
    const selectedItem = this.items.find(item => item.id === itemId);
    if (selectedItem) {
      // 处理选中项逻辑
    }
  }
}

注意事项

• 事件冒泡：确保子元素的事件会冒泡到父元素。某些事件（如 focus）不冒泡，需改用 focusin。
• 阻止默认行为：若子元素有默认行为（如 <a> 标签），需在父元素事件中调用 event.preventDefault()。
• 性能优化：避免在父元素上绑定过多事件类型，可结合事件对象（event.type）进一步区分。

结合 Vue 指令的进阶用法

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

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

模板中使用：

<div v-delegate-click:button="handleDelegateClick">
  <button data-id="1">按钮1</button>
  <button data-id="2">按钮2</button>
</div>