什么是事件委托

什么是事件委托？

事件委托是一种JavaScript编程技术，它利用事件冒泡来处理事件。以前我们使用addEventListener()为每个元素添加一个事件。现在可以将整个事件处理程序添加到一个父级元素中，然后让事件冒泡，以便获取其作用元素。

为什么要使用事件委托？

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

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

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

如何实现事件委托?

在介绍事件委托的方法之前，我们先看看一般的方法的例子

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

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

    let oUl = document.getElementById("ul1");
    let aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }

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

事件委托：

let oUl = document.getElementById("ul1");
   oUl.onclick = function(e){
        if(e.target.nodeName==LI){
         alert(123);
    }

这里利用了事件冒泡的原理，当子元素触发点击事件时，该事件会向上冒泡直到父级元素。同时使用e.target获取目标元素。

这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作.

事件委托的优点

• 简化了代码结构
• 减少了事件绑定次数
• 动态绑定事件，使得插入和删除元素更加容易控制

注意事项

• 使用事件捕获模式可能会影响性能
• 避免在无关元素上处理事件

结论

通过使用事件委托，可以大大提高您的代码的效率和可读性，并减少DOM节点操纵带来的问题。