JavaScript 事件委托（事件代理）

一、事件委托原理

• 事件委托又称事件代理

• 事件委托是利用事件的冒泡原理来实现的，简单来说就是把本来应该添加在子节点身上的事件，却添加到他的父节点身上，因为当你触发子节点身上的事件会冒泡到父节点身上，导致父节点的事件被触发

• 事件委托是JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加相同事件的时候，可以通过将该事件添加到它们的父节点，也就是将事件委托给父节点来触发处理函数，这主要得益于浏览器的事件冒泡机制

• 经典问题，父节点有那么多子元素，怎么区分事件本应该是哪个子元素的？答案就是：event 对象里记录的有“事件源”，它就是发生事件的子元素

• 事件委托的好处就是效率高，不用for循环为子元素添加事件了其次就是js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

二、代码演示

传统方法

    <ul id="ul">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

    <script type="text/javascript">
        window.onload = function(){
            var ulDom = document.getElementById('ul');
            var liDoms = Ul.children;

            //传统方法，li身上添加事件，需要用for循环，找到每个li
            for (var i=0;i<liDoms.length;i++) {
                liDoms[i].onmouseover = function() {
                    this.style.background = 'red';
                }
                liDoms[i].onmouseout = function(){
                    this.style.background = '';
                }
            }//for结束


        }
    </script>

事件委托方法

    <ul id="ul">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
<script type="text/javascript">
    window.onload = function(){
        var ulDom = document.getElementById('ul');

        ulDom.onmouseover = function(ev){
            var ev = ev || window.event;
            var liDom = ev.srcElement || ev.target;
            if(liDom.nodeName.toLowerCase() == 'li'){
                liDom.style.background = 'red';
            }

        }

        ulDom.onmouseout = function(ev){
            var ev = ev || window.event;
            var liDom = ev.srcElement || ev.target;
            if(liDom.nodeName.toLowerCase() == 'li'){
                liDom.style.background = '';
            }
        }


    }
</script>