问题: 事件代理是什么?

在实际的开发当中，利用事件流的特性，我们可以使用一种叫做事件代理的方法。就是利用 事件冒泡，把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托就无法实现。

<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;    
    display: -webkit-flex;  
}  
.color_list li{    
    width: 100px;    
    height: 100px;    
    list-style: none;    
    text-align: center;    
    line-height: 100px;  
}
//每个li加上对应的颜色，此处省略
.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(){            
        console.log(this.innerHTML)            
        box.innerHTML="该颜色为 "+this.innerHTML;        
    })    
}

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

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

function colorChange(e){        
    var e=e||window.event;//兼容性的处理   
    if(e.target.nodeName.toLowerCase()==="li"){            
        box.innerHTML="该颜色为 "+e.target.innerHTML;        
    }                    
}    
color_list.addEventListener("click",colorChange,false)

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

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

**（1）toLowerCase() **方法用于把字符串转换为小写。 语法： stringObject.toLowerCase()

返回值： 一个新的字符串，在其中 stringObject 的所有大写字符全部被转换为了小写字符。

**（2）nodeName **属性指定节点的节点名称。如果节点是元素节点，则 nodeName 属性返回标签名。如果节点是属性节点，则 nodeName 属性返回属性的名称。对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

所有主流浏览器均支持 nodeName 属性。