DOM事件流与事件委托

        DOM事件流：“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和时间冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到时间。最后一个阶段是冒泡阶段，可以在这个阶段对时间做出响应。

        这是高级程序设计一书中，对DOM时间流的描述，之前我一直以为addEventListener的第三个参数决定了事件触发方式是捕获还是冒泡，最近因为要做弹出框的功能，所以详细的研究了一下，才知道这个参数指定事件是否在捕获或冒泡阶段执行。

        关于DOM事件还有一点必须提到，就是性能问题。如果页面上的事件处理程序数量过多，将会导致页面的整体运行性能下降。因为每个函数都是对象，都会占用内存，内存中的对象越多，性能就越差。其次，必须事先指定所有时间处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。解决这个问题的方法就是事件委托。

        事件委托利用了事件冒泡，指定一个事件处理程序来管理某一类型的所有事件。举个例子：

    <ul id="namelist">
    	<li myname="zhangsan">zhangsan</li>
    	<li myname="lisi">lisi</li>
    	<li myname="wangwu">wangwu</li>
    	<li myname="zhaoliu">zhaoliu</li>
    </ul>

    document.getElementById('namelist').addEventListener('click',function(e){
  	console.log(e.target.getAttribute('myname'))
    })

就像这样，想打印出每个li标签的myname属性，只需要在ul标签上绑定click事件就可以了。