事件委派的使用及作用

事件委派

事件委派适用于未来的元素（动态添加的元素）。

利用事件冒泡，将后代元素上事件的处理程序委派给祖先元素。

event.target || event.srcElement - 在事件传播的过程中，获取最初触发事件的事件源元素

示例：
此例子在html初始化了一个id为wrapBox的ul元素。

而后通过js在for循环当中给ul添加了四个子元素，并分别给他们设置了不同的id。

最后在id为wrapBox的父元素上面添加了点击事件，通过event.target获取事件源元素。

PS: 如果不想在点击UL的时候触发事件那就做一个if判断，判断它的标签名称是不是UL，如果是UL直接return就可以了。

<ul id="wrapBox"></ul>

<script type="text/javascript">
	let wrapBoxNode = document.getElementById('wrapBox');
	for (let i = 0; i < 4; i++) {
		let childNode = document.createElement('li');
		childNode.setAttribute('id', `child_${i}`)
		wrapBoxNode.appendChild(childNode)
	}
	wrapBoxNode.onclick = (event) => {
		let target = event.target;
		console.log(target)
	}
</script>

实现的效果：