vue 实现事件委托
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>注意事项
- 事件冒泡：确保子元素事件能冒泡到父元素，避免使用
event.stopPropagation()。 - 性能优化：适合动态生成的大量子元素场景，减少内存占用。
- 事件类型：非冒泡事件（如
focus）无法使用委托，需直接绑定。
通过以上方法，可以灵活地在 Vue 项目中实现高效的事件委托。
