原生js底层基础（二十一） 事件委托

事件委托

利用事件冒泡，和事件源对象进行处理

优点：
1.性能好，不需要循环所有的元素一个个绑定事件，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
2.灵活，当有新的子元素不需要重新绑定事件，使用事件委托可以自动绑定动态添加的元素,新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

面试题
有1个ul，里面有十个li，要求点击每个li输出对应的顺序

解法1：遍历子元素

1.var ulList = document.getElementsByTagName("ul")[0];
2.    var liList = document.getElementsByTagName("li");
3.
3.    for(var i = 0; i<liList.length; i ++){
4.        (function(n){
5.            liList[n].addEventListener("click",function(){
6.            console.log(n);
7.            },false)
8.        }(i))
9.    }

解法2：事件委托(最佳)
利用事件冒泡机制，可扩展性好

1.var ulList = document.getElementsByTagName("ul")[0];
2.
3.ulList.onclick = function(e){
4.        var event = e || window.e;
5.        var target = e.target || e.srcElement;
6.        console.log(target.innerText);
7.    }