事件委托的理解

事件委托的定义：子节点的事件交给父节点来管理，而且子节点的事件是相同的

产生事件委托需求的原因是，1）如果子节点的事件是相同的，但是还是要分配新的内存去存储函数，内存占有大。2）静态的元素节点的监听可以添加，但是新增的动态元素节点无法自动添加监听

可以使用父节点.事件 =function（e）{e.target.(要改的样式)}。

对父节点内的最底层的子节点进行事件监听。

能够进行事件委托的事件，必须有冒泡阶段,onmouseenter没有冒泡阶段，onmouseover有冒泡阶段。

从批量元素监听的案例理解

案例一：给ul内部20个li添加事件监听，当鼠标按下去，li变红

//ul内部已经有20个li标签
      var Olist =document.getElementById("list");
        var Oli =document.getElementsByTagName("li");
        console.log(Olist.length);
        for (i=0;i<Oli.length;i++){
            Oli[i].onclick=function(){
                this.style.color ="red";
            }
        }

   // 动态创建20个li标签，同时对每一个标签添加事件监听，但是程序功能无法实现
        var Olist =document.getElementById("list");
        for (i=1;i<=20;i++){
           var Oli= document.createElement("li");
           Olist.appendChild(Oli);
           Oli.onclick=function(){
           Oli.style.color="red";}
        }

案例二，按钮按一次，增加一个带有事件监听的li，在ul中

    <ul id="list"></ul>
    <button id="btn"></button>
    <script>
        var Olist= document.getElementById("list");
        var Obtn= document.getElementById("btn");
        btn.onclick = function(){ 
            var Oli = document.createElement("li");
            Olist.append(Oli);
            Oli.onclick = function(){
            li.style.color="red";
            }
        }
    </script>

案例二，按钮按一次，增加一个带有事件监听的li，在ul中，使用事件委托

<ul id="list">
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <button id="btn"></button>
    <script>
        var oList =document.getElementById("list");
        var oBtn =document.getElementById("btn");
        oList.onclick= function(e){
            // oList最底层的子节点元素
            e.target.style.color ="red";
            // oList本身这个父节点元素
            e.currentTarget.style.color ="red";
        }
        oBtn.onclick= function(){
            var oLi = document.createElement("li");
            oList.appendChild(oLi);
            oLi.innerText="新来的";
        }
    </script> 

对于事件委托，是父节点的最底层的子节点

    <ul id="list">

        <!-- 点击1，1和我是最底层都会变红色，如果是span的内容，只有我是最底层变红 -->
        <li>1<span>我是最底层</span></li>
        <li>1<span>我是最底层</span></li>
        <li>1<span>我是最底层</span></li>
    </ul>
    <button id="btn"></button>
    <script>
        var oList =document.getElementById("list");
        var oBtn =document.getElementById("btn");
        oList.onclick= function(e){
            // oList最底层的子节点元素
            e.target.style.color ="red";
            // oList本身这个父节点元素
            // e.currentTarget.style.color ="red";
        }
        oBtn.onclick= function(){
            var oLi = document.createElement("li");
            oList.appendChild(oLi);
            oLi.innerText="新来的";
        }
    </script>