[js] 事件委托/事件代理

概念：

例子：

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

为什么要用事件委托：

一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

事件委托的原理：

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

事件委托怎么实现：

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

每个li被点击的效果都一样

子节点实现相同的功能：点击li，打印123：

        var oUl = document.querySelector('ul')
        var oLi = document.querySelectorAll('li')
        oLi.forEach(function(item){
            item.addEventListener('click',function(){
                console.log(item.innerText)

            })
        })

我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；

那么我们用事件委托的方式做又会怎么样呢？

        oUl.addEventListener('click',function(event){
            if(event.target.tagName==='LI'){
                console.log(event.target.innerText)
            }
        })

每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知

每个li被点击的效果都不一样

上面的例子是说li操作的是同样的效果，要是每个li被点击的效果都不一样，那么用事件委托还有用吗？

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
</div>

        var oDiv = document.querySelector('#box')

        var oLiAdd = oDiv.querySelector('#add')
        var oLiRemove = oDiv.querySelector('#remove')
        var oLiMove = oDiv.querySelector('#move')
        var oLiSelect = oDiv.querySelector('#select')

        oLiAdd.addEventListener('click',function(){
            console.log('增加')
        })
        oLiRemove.addEventListener('click',function(){
            console.log('删除')
        })

        oLiMove.addEventListener('click',function(){
            console.log('移动')
        })

        oLiSelect.addEventListener('click',function(){
            console.log('选择')
        })

4个按钮，点击每一个做不同的操作，那么至少需要4次dom操作

如果用事件委托，能进行优化吗？

        var oDiv = document.querySelector('#box')
        oDiv.addEventListener('click',function(event){
            if(event.target.tagName==='INPUT'){
                if(event.target.id==='add'){
                    console.log('添加')
                }
                else if(event.target.id==='remove'){
                    console.log('删除')
                }
                else if(event.target.id==='move'){
                    console.log('移动')
                }
                else if(event.target.id==='select'){
                    console.log('选择')
                }
            }
        })
       

用事件委托就可以只用一次dom操作就能完成所有的效果，比上面的性能肯定是要好一些的

参考：
https://www.cnblogs.com/liugang-vip/p/5616484.html