事件委派的使用及做用

事件委派

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

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

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>

实现的效果：