DOM：事件委托原理

事件委托也称事件代理。
事件委托原理：
比如ul和li，不用再给每个子节点li单独设置事件监听，而是把事件监听设置在父节点ul身上，然后利用冒泡原理，影响设置每个子节点li。

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<script>
	var ul = document.querySelector("ul");
	ul.addEventListener("click",function(e){
		// 三个li都会弹出1 因为有事件冒泡 点击li后，因为ul绑定了事件监听，会冒泡到ul身上，所以会触发事件监听
		alert(1);
		
	})
</script>

点击当前li，当前li变颜色：

 <ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<script>
       var ul = document.querySelector("ul");
       ul.addEventListener("click",function(e){
           // 还是用到排他思想
           for(var i=0; i<ul.children.length; i++){
               ul.children[i].style.color = "";
           }
           // 触发了谁 谁的颜色变为绿色
           e.target.style.color = "red";
       })
</script>