[JavaScript知识库]前端事件委托那些事儿

相信事件委托对于前端来说都不陌生，无非是对于一个列表ul中有很多li，而每一个li都有一个事件处理程序；如果数据量过大，绑定事件过多势必会影响性能，因此有了事件委托的概念。

本意：将事件绑定在ul上，因为有事件冒泡，所以当点击li时，就会冒泡到ul上；这样只需判断下当前触发源是哪一个li，就可以处理对应的事件

情况一：正常情况

//这里就简单以vue渲染方式来处理
<ul @click="onClick" >
	<li v-for="item in 10" :key="item" :data-index="item" >
		列表{{item}}
	</li>
</ul>
//处理函数
onClickUl(e) {
	//最好判断下，因为有可能点到ul
	if (e.target.nodeName.toLowerCase() === 'li') {
	   const index = parseInt(e.target.dataset.index)
		alert(`当前第${index}个`)
	}
}

情况二：当li中嵌套了很多子元素时

要理解target，它指的是当前触发元素的节点，第一种情况只有一个li，所以触发源肯定就是li，所以他的data-index就能直接获取到；当li中有很多个子元素时，那么data-xxx就必须绑定到每一个子元素上？（感觉有点搞死人）这样才能用target取到dataset

// 有很多子元素了，点击span也会冒泡到ul，但是span上又没有data-index
<ul @click="onClick" >
	<li v-for="item in 10" :key="item" :data-index="item" >
		列表{{item}}
		<span>子元素一</span>
		<span>子元素二</span>
	</li>
</ul>

解决方案：

第一种：从li往下，给每个子元素都绑定data-index，这样能确保每个子元素的点击都能找到data-index

第二种：每个点击都判断下父节点，即点击子元素时，返回父节点(li节点)的data-index，不过嵌套过深，感觉也挺麻烦

第三种：添加css pointer-events: none到子元素上（当设置为none时，元素永远不会成为鼠标事件的target，可以理解为 事件会穿透该元素，好比还是点击在li上，这样target还是li）