一个例子让你明白什么是事件代理

在实际的开发当中，利用事件流的特性，我们可以使用一种叫做事件代理的方法。

  <ul class="color_list">
        <li>red</li>
        <li>orange</li>
        <li>yellow</li>
        <li>green</li>
        <li>blue</li>
        <li>purple</li>
    </ul>
    <div class="box">
        该颜色为
    </div>

样式如下：

 .color_list {
            display: flex;
        }
        li {
            width: 100px;
            height: 100px;
            list-style: none;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }
        .box {
            width: 600px;
            height: 150px;
            background-color: #cccccc;
            line-height: 150px;
            text-align: center;
        }

我们想要在点击每个 li 标签时，输出li当中的颜色（innerHTML） 。常规做法是遍历每个 li ,然后在每个 li 上绑定一个点击事件：

 var color_list = document.querySelector(".color_list");
    var colors = color_list.getElementsByTagName("li");
    var box = document.querySelector(".box");
    for(var n = 0; n < colors.length; n++){
        colors[n].addEventListener("click",function(){
            box.innerHTML="该颜色为 "+this.innerHTML;
        })
    }

这种做法在li少量时可以，万一有一万个li呢，那就会导致性能降低（少了遍历所有 li 节点的操作，性能上肯定更加优化）。

这时就需要事件代理出场了，利用事件流的特性，我们只绑定一个事件处理函数也可以完成：

 function changeColor(e) {
        var e = e || window.event
        if (e.target.nodeName.toLowerCase() === 'li') {
            box.innerHTML = '该颜色为' + e.target.innerHTML
        }
    }
    color_list.addEventListener('click', changeColor, false)

由于事件冒泡机制，点击了 li 后会冒泡到 ul ，此时就会触发绑定在 ul 上的点击事件，再利用 target 找到事件实际发生的元素，就可以达到预期的效果。