为什么要用事件委托？

首先，需要了解一下常用的事件监听方法有哪些区别：

常用的监听方法的区别

通常，在页面中监听事件的方式有以下3种：

HTML属性 (DOM Level 0)

HTML允许在元素标签的属性中直接定义以下事件的监听代码，比如下面例子监听了<button> </button>标签的click 事件：

<button onclick="alert('Hello World')">click me</button>

DOM元素属性(DOM Level 0)

对Element节点对象事件属性指定监听函数：

<button id=aButton>click me</button>
<script>
    var button = document.querySelector('#aButton')
    button.onclick = function(e){
      alert('Hello world');
    }
</script>

addEventListener方法(DOM Level 2)

通过Element节点、document节点、window对象的addEventListener方法，定义事件监听函数：

<button id=aButton>click me</button>
<script>
    var button = document.querySelector('#aButton')
    button.addEventListener('click', function(){
      alert('Hello world')
    })
</script>

DOM为我们提供了以上三种指定监听函数的方法。

前两种方法（DOM Level 0）在使用中只能对当前对象的一个事件指定一个监听函数，这里就产生了几个问题：

1. 无法对同一个对象的同种事件注册多个事件监听函数
2. 当我们需要对多个对象注册同一个事件监听函数时，需要为每个对象准备一套代码，代码会出现冗余
3. 当用JS创建元素时，新的元素无法被监听到

因此，W3C在DOM Level2 中为我们提供了新的事件模型，其特点是：

1. DOM事件模型不依赖于特定的事件处理属性

2. 可以对任意对象的任何一种事件注册多个监听函数

新的事件模型解决了DOM Level 0 中的几个问题，因此，推荐使用addEventListener()这个方法。

---

下面我们来看一下关于事件委托的例子：

首先，需要一个简单的页面：

<div class="box">
  <ul>
    <li>选项<span>另一段话</span></li>
    <li>选项<span>另一段话</span></li>
    <li>选项<span>另一段话</span></li>
    <li>选项<span>另一段话</span></li>
  </ul>
</div>

在这个页面中，以对象节点.box 作为委托对象，为其绑定一个监听函数，并获取我们在触发click事件时所点击节点究竟是哪个：

var  div = document.querySelector('.box')
div.addEventListener('click', function(e){
  var tar = e.target
  console.log(str)
})

接下来，假设需要监听里面的<li>触发事件：

var  div = document.querySelector('.box')
console.log(div)
div.addEventListener('click', function(e){
    var tar = e.target
    if(tar.tagName.toLowerCase() === 'li'){
      // tagName 默认返回大写  
      console.log('找到了li')
    }
})

此时，<li>元素可以在触发click事件时正常做出反应，但是这里有个问题，在例子中，<li>元素中还有<span>，如果将<span>当作<li>的一部分，上面的代码在点击<span>元素时是无法触发回调的，接下来继续修改：

var  div = document.querySelector('.box')
console.log(div)
div.addEventListener('click', function(e){
    var tar = e.target
    if(tar.tagName.toLowerCase() === 'li' ||
      tar.parentNode.tagName.toLowerCase() === 'li'
      ){
      // tagName 默认返回大写  
      console.log('找到了爸爸是li')
    }
})

通过寻找父节点是否符合我们希望监听的对象，但是如果不是父节点，而是祖先的某个节点呢？

var  div = document.querySelector('.box')
console.log(div)
div.addEventListener('click', function(e){
    var tar = e.target
    while(tar.tagName.toLowerCase() !== 'li'){
      tar = tar.parentNode
    }
    if(tar){
      alert('找到了祖辈是li')
    }else{
      alert('没找到呢')
    }
})

这里仍然有问题，假如我们触发的事件的对象的祖先节点一直寻找不到<li>，就会寻找至文档根节点，最后返回一个null，会使得while循环报错，既然使用了while循环，那么在寻找父节点找到委托节点<div>时跳出循环，这个问题就得到了解决：

var  div = document.querySelector('.box')
console.log(div)
div.addEventListener('click', function(e){
    var tar = e.target
    while(tar.tagName.toLowerCase() !== 'li'){
        if(tar===div){
            tar = null
            break
        }
        tar = tar.parentNode
    }
    if(tar){
      alert('找到了祖辈是li')
    }else{
      alert('没找到呢')
    }   
})

此时，无论我们触发事件的元素是否监听对象的子元素，或者触发事件的元素是监听对象的祖辈，都有正确的处理路径。

以上就是完整的原生JS事件委托。

当然这里还有其他学习的地方：

1. 如果希望监听的对象有部分子元素不触发事件回调，以上的方法则需要修改。
2. 如何正确的封装事件委托。