20k的前端是这样写事件委托的

书到用时方恨少，事非经过不知难。这篇文章主要讲述20k的前端是这样写事件委托的相关的知识，希望能为你提供帮助。
要理解??DOM??相关事件，我们先要理解??“事件流”??这个概念，事件流描述的是从页面中接收事件的顺序。
事件冒泡：事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点或文档。
事件捕获：事件开始由不太具体的节点接收，然后逐级向下传播到最具体的节点。它与事件冒泡是个相反的过程。
??DOM2?? 级事件规定的事件流包括三个阶段：事件捕获、目标阶段、事件冒泡。
文章转载：乐字节
事件委托
事件委托，通俗的说就是将元素的事件委托给它的父级或者更外级的元素处理，它的实现机制就是事件冒泡。
假设有一个列表，要求点击列表项弹出对应的字段：

< ul id="myLink">
< li id="1"> aaa< /li>
< li id="2"> bbb< /li>
< li id="3"> ccc< /li>
< /ul>
复制代码

不使用事件委托

var myLink = document.getElementById(\'myLink\');
var li = myLink.getElementsByTagName(\'li\');

for(var i = 0; i < li.length; i++) {
li[i].onclick = function(e) {
var e = event || window.event;
var target = e.target || e.srcElement;
alert(e.target.id + \':\' + e.target.innerText);
};
}
复制代码

存在问题：

给每一个列表都绑定事件，消耗内存
当有动态添加的元素时，需要重新给元素绑定事件

8k的前端写出的事件委托
事实上很多同学在网上看到的事件委托的方法都是错的，虽然是错的，但是你面试的时候也可能会过，因为面你的面试官可能也不知道正确的事件委托应该怎么写。
下面我们就来看一下错误版的事件委托是怎么写的：

ul.addEventListener(\'click\', function(e){
if(e.target.tagName.toLowerCase() === \'li\'){
fn() // 执行某个函数
}
})
复制代码

20k的前端写出的事件委托
错误版事件委托的??bug?? 在于，如果用户点击的是 ??li??里面的 ??span??，就没法触发 ??fn??，这显然不对。
那下面我们来看一下正确的事件委托应该怎么写：

function delegate(element, eventType, selector, fn) {
element.addEventListener(eventType, e => {
let el = e.target
while (!el.matches(selector)) {
if (element === el) {
el = null
break
}
el = el.parentNode
}
el & & fn.call(el, e, el)
})
return element
}
复制代码