持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
事件委托也称为事件代理，当页面中大量子元素都要触发事件，利用事件冒泡机制，会冒泡到父元素，让父元素代替执行
简单解释：比如子元素的点击事件，无论点击哪一个子元素，都会自动触发父元素的点击事件。在父元素监听事件中，通过检查事件对象的target属性，获取真正的目标元素，实现相关操作
事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
事件委托的好处
- 只绑定一次事件，无需频繁访问DOM，性能较高，节约内存（案例应用一）
- 当有新DOM生成时，无需重复绑定事件（案例应用二）
事件委托的局限性
- 比如 onblur、onfocus、onmouseenter、onmouseleave之类的事件本身没有事件冒泡机制，所以无法委托
- 当触发事件的元素还包含其它的元素，会让本不需要触发该事件的元素绑定上事件，干扰正常的委托
事件委托的实际应用
1.在列表页面，点击列表的删除按钮，实现对应列表删除
event：指实际操作的那个元素。
target：event对象的一个属性，可以返回事件的目标节点
target.nodeName：获取目标节点具体的标签名，返回值是大写的
target.className: 获取目标节点的类名
a. 给父元素添加监听事件;
b. 当子元素触发事件时，由于事件冒泡原理，会冒泡到父元素，所以就可以在父元素的监听函数处理这个事件；
c. 查看event对象的目标节点是不是实际操作的当前元素，如果是，就执行删除操作
<script>
const oUl = document.getElementById("ul");
oUl.addEventListener('click',function(event){
let target = event.target ;
//判断是不是删除按钮
if(target.className == 'del-btn'){
//实现删除
lists.removeChild(target.parentNode.parentNode)
}
})
</script>
2.实现事件的动态绑定
给li列表加上鼠标移入、移出的效果（改变背景颜色），动态增加的li元素，也可以实现该鼠标移动效果
const oUl = document.querySelector(".content");
oUl.addEventListener('mouseover',function(event){
let target = event.target ;
//toLowerCase()将其转换成小写
if(target.nodeName.toLowerCase() == 'li'){
target.style.background='red';
}
});
oUl.addEventListener('mouseout',function(event){
let target = event.target ;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background='orange';
}
});
btn.onclick = function(){
let oLi = document.createElement('li');
oUl.appendChild(oLi);
}
注意：此案例如果用普通写法，循环li列表，实现它们各自的鼠标移动事件。新增的li,是没有鼠标移动效果的。因为这个控制效果的js代码在页面加载时就执行。默认循环的li只有页面展示的那些，鼠标移动事件只能是这些默认的li列表。而利用事件冒泡把鼠标移动事件委托给ul,只要鼠标移入、移出li列表，都会触发ul的鼠标事件。
