在实现事件委托之前，首先必须先了解事件的绑定、监听和派发的含义。

事件的绑定

  1. var div = document.getElementById('content')
  2. content.onclick = function(){
  3. console.log('绑定成功！')}

这是最直接简单的绑定在DOM元素上的一个事件。但是它有一个缺点：后面重复绑定的事件会直接覆盖掉之前绑定的事件。于是就产生了新的方法：

事件监听

  1. var div = document.getElementById('content')
  2. function f1 (){
  3. console.log('绑定事件1
  4. ')}
  5. function f2 (){
  6. console.log('绑定事件2'
  7. )} 
  8. div.addEventListener('click',f1)
  9. div.addEventListener('mousemove',f2)

addEventListener()事件的监听可以解决事件覆盖的问题，还可以控制事件的触发方式（即事件的捕获和冒泡）。

事件派发

事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

冒泡：

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>JS Bin</title>
  6. </head>
  7. <body>
  8.   <div>
  9.     <p>子元素</p>
  10.   </div>
  11. </body>
  12. </html>

在这个例子中，当子元素P被点击时，事件冒泡的顺序为：p -> div -> body -> html -> document

捕获：

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

仍然是上面的例子，当子元素P被点击时，事件捕获的顺序则是：document -> html -> body -> div -> p
下图是两个事件的通知顺序：
使用原生 JS 实现事件委托 - 图1
ps:可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来阻止事件的冒泡传播。在addEventListener()监听事件中，可以添加第三个参数 false（执行冒泡）或者 true（执行捕获）来选择需要的事件流顺序，addEventListener() 默认为false。

事件委托

事件委托是基于以上几个要点的。
以下是原生JS实现的事件委托的方法：

  1. let dom = {
  2.   on: function(element, eventType, selector, fn) {
  3.     element.addEventListener(eventType, e => {
  4.       let el = e.target
  5.       while (!el.matches(selector)) {
  6.         el = el.parentNode
  7.         if (element === el) {
  8.           el = null
  9.           break
  10.         }
  11.       }
  12.       el && fn.call(el, e, el)
  13.     })
  14.     return element
  15.   },

具体举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>JS Bin</title>
  6.   <style>
  7.     div{
  8.   border:1px solid #000;
  9.   }
  10.   p{
  11.     background:red;
  12.   }
  13.   h1{
  14.     background:blue;
  15.   }
  16.   </style>
  17. </head>
  18. <body>
  19.   <div>
  20.     <p>这是p</p>
  21.     <h1>这是h1</h1>
  22.   </div>
  23.   <script>
  24. var div = document.querySelector('div')
  25. div.addEventListener('click',function(e){
  26.   var t = e.target
  27.   while(t.tagName !=='H1'){
  28.     t = t.parentNode
  29.     if(t === div){
  30.       t = null
  31.       break;
  32.     }
  33.   }
  34.   if(t){
  35.     console.log('你点击了div里的h1')
  36.   }else{
  37.     console.log('你点击的不是div里的h1')
  38.   }
  39. })
  40.   </script>
  41. </body>
  42. </html>

例子的功能很简单，当你点击div里面的h1元素的时候，打印'你点击了div里的h1',当你点击的不是div里面的h1元素的时候，打印'你点击的不是div里的h1'

  1. var div = document.querySelector('div')
  2. div.addEventListener('click',function(e){

代码解析：选中div,并且对div进行监听，当div里面的元素被点击时触发。

  1. var t = e.target
  2.   while(t.tagName !=='H1'){
  3.     t = t.parentNode

代码解析：声明t为被点击选中的目标，进入while循环，当被点击的目标不是h1包含的元素时，将t赋值为该点击目标的父级元素的tagName再比较，一直冒泡向上查找直到找到h1为止或者继续进入while循环。

  1. if(t === div){
  2.       t = null
  3.       break;
  4.     }

代码解析：如果t的值是div,证明了从初始点击目标一直冒泡找到最外面的div层都不存在h1的父元素，证明了它并不存在于“div里面的h1元素”中，跳出循环。

  1. if(t){
  2.     console.log('你点击了div里的h1')
  3.   }else{
  4.     console.log('你点击的不是div里的h1')
  5.   }

代码解析：如果t存在，证明找到了点击元素存在为h1的父元素，即存在于div里的h1元素当中，打印出'你点击了div里的h1'如果t不存在,证明并没有找到点击元素有tagName为h1的父元素，并不存在于div里的h1元素当中，打印出'你点击的不是div里的h1'
事件委托的优点：

  • 减少使用监听器，优化代码
  • 能够监听动态的内容