这是我参与2022首次更文挑战的第2天，活动详情查看：2022第一次更文挑战
Js中的事件委托已经是老生常谈了，但是想要真正的了解事件委托的机制以及原理还得深入思考，接下来咱们一起来深入了解一下 '事件委托'
事件委托是什么？
现在让别人帮我拿东西，即程序中的现有的dom节点是有事件的
后来又需要别人帮我们拿东西，即程序中新添加的dom节点也是有事件的
比如说有一堆的“事件处理程序”这个时候我们就可以用到事件委托，事件委托利用事件冒泡，就是只用一个事件处理程序来处理一堆一种类型的事件，eg：点击事件冒泡到document，这就意味着可以为整个页面指定一个点击事件处理程序，而不用为每个元素分别指定事件处理程序，比如有一下HTML代码：
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
如果对页面中所有需要使用onclick 事件处理程序的元素都如法炮制，结果就会出现大片雷同的 只为指定事件处理程序的代码。使用事件委托，只要给所有元素共同的祖先节点添加一个事件处理程序， 就可以解决问题。比如：
let list = document.getElementById("myLinks");
list.addEventListener("click", (event) => {
let target = event.target;
switch(target.id) {
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http:// www.wrox.com";
break;
case "sayHi":
console.log("hi");
break;
}
});
这里只给 <ul id="myLinks"> 元素添加了一个onclick 事件处理程序。因为所有列表项都是这个
元素的后代，所以它们的事件会向上冒泡，最终都会由这个函数来处理。但事件目标是每个被点击的列
表项，只要检查event 对象的id 属性就可以确定，然后再执行相应的操作即可。相对于前面不使用事
件委托的代码，这里的代码不会导致先期延迟，因为只访问了一个DOM元素和添加了一个事件处理程
序。结果对用户来说没有区别，但这种方式占用内存更少。所有使用按钮的事件（大多数鼠标事件和键
盘事件）都适用于这个解决方案。
事件委托的优点：
-
document 对象随时可用，任何时候都可以给它添加事件处理程序（不用等待DOMContentLoaded或load 事件）。这意味着只要页面渲染出可点击的元素，就可以无延迟地起作用。
-
节省花在设置页面事件处理程序上的时间。只指定一个事件处理程序既可以节省DOM引用，也可以节省时间。
-
减少整个页面所需的内存，提升整体性能。
最适合使用事件委托的事件包括：click、mousedown、mouseup、keydown 和keypress。 mouseover 和mouseout 事件冒泡，但很难适当处理，且经常需要计算元素位置（因为mouseout 会 在光标从一个元素移动到它的一个后代节点以及移出元素之外时触发）。
以上就是本篇内容了，如有异议，欢迎指出~~
