事件委托

事件委托首先要知道事件源对象：e.target 或 e.srcElement（因浏览器不同，浏览器可能只有其中的一个）

<ul>
    <li class="class1">1</li>
    <li class="class2">2</li>
    <li class="class3">3</li>
    <li class="class4">4</li>
    <li class="class5">5</li>
</ul>
<script>
    var ul = document.getElementsByTagName('ul')[0];
    ul.addEventListener('click',function(e){
        var event = e || window.event;  //兼容IE
        console.log(event);
    },false);
</script>

点击ul中的一个li后在控制台查看，如图：

虽然点击事件绑定在 ul 上，但是当鼠标点击时会记录点击的源对象（图中点击的是第五个 li），我们可以将需要绑定在 li 上的事件绑定在 ul 上，然后利用事件源对象对 li 进行处理，达到对 li 操作的目的。这就是事件委托。
如：

  <ul>
        <li class="class1">1</li>
        <li class="class2">2</li>
        <li class="class3">3</li>
        <li class="class4">4</li>
        <li class="class5">5</li>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        ul.addEventListener('click',function(e){
            var event = e || window.event;
            var target = event.target || event.srcElement;
            target.style.backgroundColor = "red";
        },false);
 	</script>

当鼠标点击时，获取到操作的源对象li，然后对其操作将背景颜色变为红色。