js中的事件委托或是事件代理

直接看例子，我觉得非常好。

有3个同事预计会在周一收到快递，有2种方法，

1.一种是3个人都在公司门口等快递

2.委托给前台代收。

现实生活中，我们都采用委托的方案。等前台签收后，判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是公司即使来了新员工(不管多少)，前台都会统一签收

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

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

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

为什么要用事件委托？

一般来说，dom需要有事件处理程序，我们都会直接给他设置事件处理程序就好，但是如果有很多个dom需要添加处理事件呢？比如我们有100个li,每个li都有相同的click事件，可能我们会用for循环的方法来遍历所有的li,然后给他们田间事件。

但是页面的事件处理程序会直接关系到也没的整体运行性能，因为需要不断的与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>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

实现功能是点击li，弹出123

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName("li");
    for(var i=0;i        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

上面的demo很简单，相信很多人都是这么实现的，我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标li的位置，才能执行最后的操作，每次点击都要找一次li；

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

window.onload = function(){
    var oUl = document.getElementById("ul1");
    oUl.onclick = function(){
           alert(123)
    }
}

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul有点击事件，所以事件就会被触发，当然，这里当点击ul的时候，那么问题来了，如果我想让事件代理的效果跟直接给节点的事件效果是一样怎么办？比如说只有点击li才会触发

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作dom，但是不是真正操作dom，当然，这个有兼容性的，标准浏览器ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较

window.onload = function(){
    var oUl = document.getElementById("ul1");
    oUl.onclick = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li'){
            alert(123);
            alert(target.innerHTML);
        }
    }

}

这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，就大大减少dom操作，优化的性能可想而知！

上面的例子是说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>

window.onload = function() {
    var Add = document.getElementById("add");
    var Remove = document.getElementById("remove"); 
    var Move= document.getElementById("move"); 
    var Select= document.getElementById("select"); 
     Add.onclick = function(){
                alert('添加');
            };
     Remove.onclick = function(){
                alert('删除');
            };
     Move.onclick = function(){
                alert('移动');
            };
     Select.onclick = function(){
                alert('选择');
            }

}

上面实现的效果我就不多说了，很简单，4个按钮，点击每一个做不同的操作，那么至少需要4次dom操作，如果用事件委托，能进行优化吗？

window.onload = function(){
    var oBox = document.getElementById("box");
    oBox.onclick = function(){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLocaleLowerCase() == 'input'){
            switch(target.id){
                case 'add':
                    alert('添加');
                break;
                case 'remove':
                    alert('删除');
                break;
                case 'move':
                    alert('移动');
                break;
                case 'select':
                    alert('选择');
                break;

            }    
        }
    }

}

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

<input type="button" name="" id="btn" value="添加"/>
 
<ul id="ul1>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>

现在是移入li，li变红，移出li，li变白，这么一个效果，然后点击按钮，可以向ul中添加一个li子节点

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //鼠标移入变红，移出变白
            for(var i=0; i                aLi[i].onmouseover = function(){
                    this.style.background = 'red';
                };
                aLi[i].onmouseout = function(){
                    this.style.background = '#fff';
                }
            }
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

这是一般的做法，但是你会发现，新增的li是没有事件的，说明添加子节点的时候，事件没有一起添加进去，这不是我们想要的结果，那怎么做呢？一般的解决方案会是这样，将for循环用一个函数包起来，命名为mHover，如下：

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            function mHover () {
                //鼠标移入变红，移出变白
                for(var i=0; i                    aLi[i].onmouseover = function(){
                        this.style.background = 'red';
                    };
                    aLi[i].onmouseout = function(){
                        this.style.background = '#fff';
                    }
                }
            }
            mHover ();
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
                mHover ();
            };
        }

虽然功能实现了，看着还挺好，但实际上无疑是又增加了一个dom操作，在优化性能方面是不可取的，那么有事件委托的方式，能做到优化吗？

window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName('li');
            var num = 4;
            
            //事件委托，添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "red";
                }
                
            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background = "#fff";
                }
                
            };
            
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }

看，上面是用事件委托的方式，新添加的子元素是带有事件效果的，我们可以发现，当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作，这才是事件委托的精髓所在。

--------------------------------------------------华丽的分割线-------------- -----------------------------------------------------------------------------------------------------

在这里先感谢一下@苍茫大地NV 的提问，提的问题非常好！????????????

他的问题是：

现在给一个场景 ul > li > div > p，div占满li，p占满div，还是给ul绑定时间，需要判断点击的是不是li（假设li里面的结构是不固定的），那么e.target就可能是p，也有可能是div，这种情况你会怎么处理呢？

那我们现在就再现一下他给的场景

<ul id="test">
        <li>
            <p>11111111111</p>
        </li>
        <li>
            <div>
                22222222
            </div>
        </li>
        <li>
            <span>3333333333</span>
        </li>
        <li>4444444</li>
    </ul>

如上列表，有4个li，里面的内容各不相同，点击li，event对象肯定是当前点击的对象，怎么指定到li上，下面我直接给解决方案：

var oUl = document.getElementById('test');
    oUl.addEventListener('click',function(ev){
        var target = ev.target;
        while(target !== oUl ){
            if(target.tagName.toLowerCase() == 'li'){
                console.log('li click~');
                break;
            }
            target = target.parentNode;
        }
    })

-------------------------------------------------------------------华丽的分割线----------------------------------------------------------------

总结：

那什么样的事件可以用事件委托，什么样的事件不可以用呢？

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

js中的事件委托或是事件代理

为什么要用事件委托？

事件委托的原理

那么，事件委托怎么实现？

继续阅读

新添加的元素监听事件

AOP的相关概念

若依前后端分离默认跳转到第一个子菜单

Redis 原理

jQuery使用on进行事件委托，父、子元素绑定相同事件，阻止冒泡

【React】组件基础

关于js中的事件委托

对于原生js中的事件委托解析

js高程：事件委托

强大的js事件委托

深入理解js中的事件委托

nextTick 理解及运用

DOM（一）DOM（一）

Reactor网络模型结构

ES6-箭头函式

XML、JSON、DOM、DOM4J