另一方面，什么样的事件代理，一般来说，就是将一个元素响应事件(click、keydown ) () )的函数委托给另一个元素
如上所述，事件流经历三个阶段：捕获阶段-目标阶段-冒泡阶段，事件请求在冒泡阶段进行
事件委托将一个或多个元素的事件委托给其父元素或更外部的元素。 实际绑定事件的是外部元素而不是目标元素
当事件响应目标元素时，事件鼓泡机制会触发其外部元素的绑定事件，并在外部元素上执行函数
举个例子吧。
例如，如果宿舍的同学同时快递到达，一个愚蠢的方法就是他们一个个去领
最好的办法是把这件事委托给宿舍长，一个人把所有的快递都带走，然后根据收件人分发给每个人
其中，取快递是一个事件，每个同学都指向需要应对事件的DOM要素，去取快递的宿舍长是代理的要素
因此，真正绑定事件的是这个元素，根据收件人分发快递的过程正在执行事件，需要确定当前响应的事件与哪个被代理元素匹配或匹配
二、如果有应用场景列表，列表中有大量列表项目，则需要在点击列表项目时响应事件
ulid=' list ' Li item1/Lili item2/Lili item3/Li . liitemn/Li/ul如果将函数逐个绑定到每个列表项，则内存消耗会非常大
//目标元素const lis=document.getelementsbytagname (' Li ) ) /循环遍历绑定事件for ) Leti=0； ilis.length； I ) lis[I].onclick=function(e ) console.log ) e.target.innerhtml ) }此时，单击事件绑定到父元素ul并执行事件
//在父层元素中添加事件document.getelementbyid (列表).addeventlistener )、function(e ) /兼容性处理varevent=e | //确定是否与所需元素if (target.nodename.tolocalelowercase===' Li ' )匹配(console.log )、target.innnerhtmmog、thh )； 另一个场景是上述列表项目很少。 已将事件绑定到每个列表项目
但是，如果用户可以随时动态添加或删除列表项中的元素，则每次更改都必须将事件重新绑定到新元素，并将事件解除绑定到要删除的元素
使用事件委托时，没有这种故障。 由于事件绑定到父层，因此目标元素在实际响应事件函数执行的过程中保持一致，而与目标元素的变化无关
举个例子：
在以下html结构中，可以通过单击input动态添加元素
input type=' button ' name=' id=' BTN ' value='添加'/ul1 ' Li item1/Li Li item2/Li Li item3/Li Li item4/Li
constobtn=document.getelementbyid (' BTN )； const oul=document.getelementbyid (ul1 )； 常数编号=4； //事件请求，添加的子元素中也包含事件oul.onclick=function(ev ) {ev=ev||window.event； const target=ev.target|| ev.srcelement； if (target.nodename.to lower case (=(Li ) ) console.log )、target.innerHTML )； }； //新节点oBtn.onclick=function () {num； const oli=document.createelement (' Li )； oLi.innerHTML=`item${num} `； oul.appendchild(Oli； (； 可以看到，使用事件委托可以在动态绑定事件时大大减少重复的工作
三、将适合委托案件汇总为： click、mousedown、mouseup、keydown、keyup、keypress
从上面的APP应用程序场景中可以看到，使用事件进行请求有两大优点。
减少整个页面所需的内存，提高整体性能
动态绑定，减少重复工作
但是，使用事件委托也是有限的。
由于focus、blur等事件没有事件鼓泡机制，无法进行委托绑定事件
像mousemove、mouseout这样的事件，尽管发生了事件，但由于只能不断地根据位置计算定位，在性能上消耗很高，所以不适合委托事件