JS事件委托

什么叫事件委托

事件委托也称之为事件代理（Event Delegation）。 是JavaScript中常用绑定事件的常用技巧。 顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。

事件委托原理

事件委托是利用事件的冒泡原理来实现的，那么什么是事件冒泡呢？事件冒泡就是事件从最深的节点开始，然后逐步向上传播事件.举个例子:页面上有这么一个节点树，div>ul>li;比如给最里面的li添加一个click点击事件，那么这个事件就会一层一层的往外执行.而利用事件委托,给最外层的div添加click事件,那么里面的ul，li做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件.

事件委托的实现

**HTML和css部分

   <style>
        ul {
            list-style: none;
        }

        li {
            width: 200px;
            height: 100px;
            margin-bottom: 10px;
            background-color: aqua;
        }
    </style>


    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
         var myUl = document.querySelector('ul')
         var myLi = [...document.querySelectorAll('li')]

         myUl.onclick = function(e){
            if(e.target.nodeName === 'LI'){  //target.nodeName得到的是大写的LI,一定要是不一样的,标签是小写,这里就要用大写
               console.log('点击了li')}
          }
         // 创建一个 Li 节点
         var newLi = document.createElement('li')
         newLi.innerText = '我是通过 JS 创建的'

        myUl.appendChild(newLi)  //新添加的li也可以触发点击事件


事件委托
         *      因为事件冒泡的存在, 所以点击子元素时, 一定会触发给父级
         * 
         *      所以可以将子元素统一的事件, 都提交给父级,在这里我们需要给所有的li都添加一个点击事件,那么我们就可以把click添加给ul
         * 
         *  e.target: 触发事件的事件源
         * 
         * 
         * 总结:
         *      为什么要用事件委托
         *          动态的添加了 li 时, 新加的li没有绑定上事件, 需要动态添加完成后重新绑定事件, 这样操作比较麻烦
         *          所以此时可以利用事件委托
         * 
         *      li 的点击事件必须委托给父级的 点击事件
    </script>