JavaScript--事件委托

什么是事件委托

• 把目标元素的事件委托给父元素
• 利用了事件冒泡的原理

事件委托有什么好处

• 管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。
• 可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。（比如后来添加子元素依然拥有事件）
• JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。

事件委托的应用场景

• 很多商品放在一个ul下面的li标签里面，点击添加或删除商品，就可以绑定商品的父元素ul标签，通过事件代理去找到要点击的商品，完成添加删除事件

为什么要使用事件委托

• 绑定事件太多，浏览器占用内存变大，严重影响性能
• Ajax出现，局部刷新盛行，每次加载完，都要重新绑定事件
• 部分浏览器移除元素时，绑定的事件没有被及时移除，导致内存泄漏，严重影响性能
• Ajax中重复绑定，导致代码耦合性过大，影响后期维护

事件委托的解决方案

      ul.onclick = function (e) {
            var e = e || event;
            var target = e.target || e.srcElement //目标对象的dom
            if (target.tagName == "LI") {
                console.log(target.innerHTML);
            }
       }