使用原生 JS 实现事件委托

很多情况下都可能使用到事件委托，那么对于一个使用者来说，为什么要使用事件委托？又是否正确的使用了事件委托？这里我想简单的说一下我对使用原生JS实现事件委托的理解，有不准确的地方望指教。

概述

事件委托有哪些好处，才会被在编程中大量的使用呢？
那么就得先说说事件的一些性能和使用的问题：

1. 绑定事件越多，浏览器内存占用越大，严重影响性能。
2. 部分浏览器移除元素时，绑定的事件并没有被及时移除，导致的内存泄漏，严重影响性能

事件委托的基础

1. 事件的冒泡，所以才可以在父元素来监听子元素触发的事件。
2. 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，就跳出循环，否则遍历层级越多，同样影响性能。所以事件委托绑定在合理的低层级元素上同样也很重要。