冒泡和捕获：事件代理

利用事件流（冒泡和捕获）的特性，我们可以使用一种叫做事件代理的方法操作DOM事件

<ul id="color-list">    <li>red</li>    <li>yellow</li>    <li>blue</li>    <li>green</li>    <li>black</li>    <li>white</li></ul>

如果点击页面中的li元素，然后输出li当中的颜色，我们通常会这样写:

(function(){    var color_list = document.getElementById('color-list');    var colors = color_list.getElementsByTagName('li');    for(var i=0;i<colors.length;i++){                                  colors[i].addEventListener('click',showColor,false);    };    function showColor(e){        var x = e.target;        console.log("The color is " + x.innerHTML);    };})();

如果利用事件流的特性，我们只绑定一个事件处理函数也可以完成：

(function(){    var color_list = document.getElementById('color-list');    color_list.addEventListener('click',showColor,false);    function showColor(e){        var x = e.target;        if(x.nodeName.toLowerCase() === 'li'){            console.log('The color is ' + x.innerHTML);        }    }})();

使用事件代理的好处不仅在于将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。假如上述列表元素当中添加了其他的元素（如：a、span等），我们不必再一次循环给每一个元素绑定事件，直接修改事件代理的事件处理函数即可。