事件委託

• 事件委託原理：

利用冒泡的原理，把事件加到父級上，觸發執行效果。

好處：
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);
    }