vue 事件委托

Vue 添加事件的方式很方便，在标签元素上以@click=“itemFn” 的形式填加就好，而且还有 .stop 、.prevent 、.self 等修饰符，简单好用。

但是如果li非常多呢？给列表上每个li都添加点击事件是不是不太好？

li 添加click

<template>
	<ul>
      <li class="li" v-for="(m,i) in 5" :key="i" @click="itemFn(m)">{{m}}</li>
    </ul>
</template>

<script>
	export default {
		methods:{
			itemFn (res) {
				//点击每个li,打印 1 、2 、3 、4、5
				
				console.log(res) 	}
			}
		}
	}
</script>

事件委托 ul 添加click

<template>
	<ul @click="clickUlFn">
      <li class="li" v-for="(m,i) in 5" :key="i" :data-index="i">{{m}}</li>
    </ul>
</template>

<script>
	export default {
		methods:{
			clickUlFn (e) {
				if(e.target.nodeName =='LI'){
					//0、1、2、3、4  下标
					console.log(e.target.dataset.index) 
				}
			}
		}
	}
</script>

注意 nodeName

需要注意比对一下nodeName，是否点击的是 li

事件委托的坑

//将点击事件添加到UI上，确实减少了事件的注册，但是li里通常还有其他子元素，
//当你实际获取e.target.nodeName 时，也大概率不是li ，因此我一般会将一个子元素定位到li上面
// z-index 调大，且透明

如果还有更好的办法，欢迎评论留言~