vue 实现事件委托
Vue 中实现事件委托的方法
事件委托是一种通过将事件监听器绑定到父元素而非子元素的技术，利用事件冒泡机制统一处理子元素的事件。Vue 中可以通过以下方式实现：
1. 使用 v-on 和事件修饰符
在父元素上绑定事件，通过事件对象的 target 属性判断触发事件的子元素：
<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>2. 动态事件绑定
结合 v-for 和动态事件名实现更灵活的事件委托：
<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(`Clicked item ${id}`);
}
}
}
}
</script>3. 使用事件代理库
对于复杂场景，可以使用专门的事件代理库如 delegate：
import delegate from 'delegate';
export default {
mounted() {
delegate(this.$el, 'button', 'click', (e) => {
console.log('Button clicked', e.target);
});
},
beforeDestroy() {
// 记得移除事件监听
delegate.off(this.$el, 'button', 'click');
}
}注意事项
- 确保事件冒泡没有被阻止（
event.stopPropagation()） - 动态生成的元素需要确保父元素存在
- 使用
dataset属性传递数据更可靠 - 在组件销毁时移除事件监听防止内存泄漏
事件委托能有效减少事件监听器数量，特别适合动态内容或大量相似元素的场景。
