事件委托

事件委托是通过事件冒泡的原理，利用父级给子级添加事件。
事件委托的好处是不需要去遍历元素的子节点，只需要给父节点添加事件，与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;
        }
});