javascript:利用事件委托处理列表点击事件

通过document的querySelectorAll方法，遍历所有a标签，给每个标签添加上点击事件。

缺点也很显而易见：一个是添加了太多的事件，这些都是同dom操作，影响了性能；另外一个是你只对a标签添加了事件，如果还需要对点击li标签做一些什么事情的话，还得另外再编写一个handler。

使用事件委托，我们可以轻易改善上面的代码。

对比第一次写的代码，这次在整个页面只有一个dom操作，因为只给了ul标签设置了事件监听器，利用了冒泡原理影响了子节点。

DOM的事件传递机制

DOM在事件传递中，可以分为三个阶段，分别是捕获、目标和冒泡。首先是从根节点出发，到达目标节点，若此过程中触发了事件，则被称为捕获（CAPTURING）事件；当节点到达定义点击事件的目标节点时，此时则处于目标（TARGET）阶段。而在目标节点触发事件后，最后就会一路往上回到根节点，此时若有事件发生，则是冒泡（BUBBLING）事件。

注意

这里的代码用到了模板字面量和箭头函数，都属于ES6语法。需要运行在兼容ES6语法的浏览器中。