很多情况下都可能使用到事件委托，那么对于一个使用者来说，为什么要使用事件委托？又是否正确的使用了事件委托？这里我想简单的说一下我对使用原生JS实现事件委托的理解，有不准确的地方望指教。
概述
事件委托有哪些好处，才会被在编程中大量的使用呢？
那么就得先说说事件的一些性能和使用的问题：
- 绑定事件越多，浏览器内存占用越大，严重影响性能。
- 部分浏览器移除元素时，绑定的事件并没有被及时移除，导致的内存泄漏，严重影响性能
事件委托的基础
- 事件的冒泡，所以才可以在父元素来监听子元素触发的事件。
- DOM的遍历，一个父级元素包含的子元素过多，那么当一个事件被触发时，是否触发了某一种类型的元素呢？
//这是老师为教学造的一个事件委托的小轮子示例
let dom = {
on: function(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
}
一个简单的事件委托
只是使用文字描述，是无法很好的理解事件委托的，那么这里我们来看一个例子：
注：假设只支持标准浏览器，不兼容IE的低版本
我现在使用原生的JS，来实现一个简单的事件委托
<ul>
<li><span>选项1</span></li>
<p><span>这行是p</span></p>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
这是写了简单样式的一个列表方便理解
如果我想在点击每一行的li元素后就打印出来一个数字，假设li增加到100行，是不是要写100个监听事件呢，显然，这种笨拙的做法是不会被天生骄傲与懒惰的程序员们拒绝的，如果li元素里还增加了其它元素，那又会出现不能触发的bug,这与初设是相差甚远的。这样事件委托就是需要出现的时候了，我们只需要往上监听父元素，而对于满足条件的子元素，只需要触发父元素，就会触发满足条件判断的所有子元素。
var ul = document.querySelector('ul')
ul.addEventListener('click',function(e){
var el = e.target
while(el.tagName !== 'LI'){
el = el.parentNode
if(el === ul){
el = null;
break;
}
}
if(el){
console.log('我点击了ul里的li')
}else{
console.log('我点击的不是ul里的li')
}
})
运行JS后，可以看到，点击黄色区域内外的两行内容，在控制台console出来的内容是不一样的，这就是典型的事件委托简单示例。
由此示例再一次证实，在必需用事件委托的地方，一定存在影响性能的一个前提： 元素中，绑定事件委托的次数太多，严重影响性能；
事件委托由底层级元素向上遍历直到监听层级的父元素，如果返回null，就跳出循环，否则遍历层级越多，同样影响性能。所以事件委托绑定在合理的低层级元素上同样也很重要。
