事件委托是通过事件冒泡的原理，利用父级给子级添加事件。
事件委托的好处是不需要去遍历元素的子节点，只需要给父节点添加事件，与dom交互一次，大大的减少了与dom的交互次数，提高了性能。且不需要对每个li添加click事件监听。对于动态添加的子节点也适用。
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
代码效果：点击li弹出每个li的内容
html
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
js
var ul = document.getElementById('ul');
ul.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement; //当前事件的dom，即事件源
if( target.nodeName.toLowerCase() == 'li' ){
alert(target.innerHTML)
}
};
假如在li里添加了span标签或a标签，那么当前点击事件的dom就是span或者a标签，这时候的解决方法
html
<ul id="ul">
<li><span>1</span></li>
<li><div>2</div></li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
js
document.getElementById('ul').addEventListener('click',function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
while(target !== ul ){ //匹配当前的事件源是否是li，不是的话继续往上找
if(target.tagName.toLowerCase() == 'li'){
alert(target.innerText);
break;
}
target = target.parentNode;
}
});
