JavaScript中的事件委托

首先事件委托不是每个子节点单独设置监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个节点。常起到代替for循环的作用。

下面一个例子，当点击ul中其中一个li时只有一个li会变色，其他的不会变色。

html部分

<ul>  
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
    </ul>
  

Js部分

    <script>
        var ul=document.querySelector('ul');             // 事件源
        ul.addEventListener('click',function(e){         // e 事件的对象
            for(var i=0;i<ul.children.length;i++){      // 排他算法 保证只有选中的会变色
                ul.children[i].style.backgroundColor='';
            }
            e.target.style.backgroundColor='blue';      // e.target 获取触发事件的类型 
        })
    </script>

完整的代码

 <ul>  
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
        <li>点我点我，我会变色！我会变色</li>
    </ul>
    <script>
        var ul=document.querySelector('ul');             // 事件源
            ul.addEventListener('click',function(e){         // e 事件的对象
             for(var i=0;i<ul.children.length;i++){      // 排他算法 保证只有选中的会变色
                ul.children[i].style.backgroundColor='';
            }
            e.target.style.backgroundColor='blue';      // e.target 获取触发事件的类型 
            })
    </script>