js委托代理

什么是事件委托：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
为什么要用事件委托：减少DOM节点的操作，优化页面。将事件绑定在父元素，通过target.nodeName 获取目标元素判断，执行事件。

事件委托实现demo:
html:
    <ul id="el">
            <li>test11111111111111</li>
            <li>test222222222222</li>
            <li>test333333333333</li>
    </ul>
jvascript:
一般的事件添加方法：
        var elUl = document.getElementById('el');
        var elLi = document.getElementsByTagName('li');
        for(var i=0;i<elLi.length;i++){
                elLi[i].onclick = function(){
                        alert(this.innerHTML);
                }
        }
事件委托方式：
        var elUl = document.getElementById('el');
        elUl.addEventListener('click', function(e){
                var e = e || window.event;
                var target = e.target || e.srcElement;
                if(target.nodeName.toLowerCase() == 'li'){
                            alert(target.innerHTML);
                }
        });
弹出的内容即为当前的元素的内容。
事件委托只要操作一次DOM即可。

实际的写法中dom中还会存在嵌套，不是每次都是操作层级最低的dom元素。如：
html:
<ul id="el">
         <li>
                <p>11111111111</p>
        </li>
        <li>
                <div>5555555555555</div>
        </li>
         <li>test222222222222</li>
          <li>test333333333333</li>
</ul>

javascript:
    var el = document.getElementById('el');
    el.addEventListener('click', function(e){
            var e = e || window.event;
            var target = e.target || e.srcElement;
            while(true){
                if(target.nodeName.toLowerCase() == "li"){
                            alert(target.innerHTML);
                            break;
                }
                var target = target.parentNode;
            }
    });
或：
function  deal(dom){
            if(dom.nodeName.toLowerCase() == "li"){
                alert(dom.innerHTML);
                return ;
            }
            var dom = dom.parentNode;
            deal(dom);
  }

 el.addEventListener('click', function(e){
            var e = e  ||  window.event;
            var target = e.target  ||  e.srcElement;
            deal(target);
         }
});

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。
不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

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