事件委托

• 事件委托原理：

利用冒泡的原理，把事件加到父级上，触发执行效果。

好处：
1. 提高性能
2. 新添加的元素，还会有之前的事件

• event对象事件源:

不管在哪个事件中，只要操作的那个元素就是事件源

兼容性：
IE window.event.srcElement
标准下 event.target

<input type='button' value='添加' id='btn'>    <ul id='list'>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ul>    <script type="text/javascript">    var oList = document.getElementById('list');    var aLi = oList.getElementsByTagName('li');    var oBtn = document.getElementById('btn');    var iNow = aLi.length;  /*  for ( var i = 0; i < aLi.length; i++) {        aLi[i].onmouseover = function() {            this.style.background = 'red';        }        aLi[i].onmouseout = function() {            this.style.background = '';        }    }*/    oList.onmouseover = function(ev) {        var ev = ev || window.event;        var target = ev.target || ev.srcElement;        if (target.nodeName.toLowerCase() == 'li') {            target.style.background = 'red';        }    }     oList.onmouseout = function(ev) {        var ev = ev || window.event;        var target = ev.target || ev.srcElement;        if (target.nodeName.toLowerCase() == 'li') {            target.style.background = '';        }    }    oBtn.onclick = function() {        iNow++;        var oLi = document.createElement('li');        oLi.innerHTML = iNow;        oList.appendChild(oLi);    }