什么是事件委托？什么时候用？

js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上。
事件代理就是，本来加在子元素身上的事件，加在了其父级身上。

事件委托就是通过事件冒泡的原理，利用父级去触发子级的事件（即事件绑定在父节点上）

那就产生了问题：父级那么多子元素，怎么区分事件本应该是哪个子元素的？

答案是：event对象里记录的有“事件源”，它就是发生事件的子元素。

它存在兼容性问题，在老的IE下，事件源是
window.event.srcElement，其他浏览器是 event.target

用事件委托有什么好处呢？

第一个好处是效率高，比如，不用for循环为子元素添加事件了
第二个好处是，js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

---

好吧，下面还是用例子来说，更容易理解。

---

例子1. 页面有个ul包含着4个li，鼠标移动到li上，li背景变成红色，移出，背景恢复原色。

如果按照以前的写法，代码如下：

            
111
            
222
            
333
            
444
        

        

现在用事件委托的方式，onmouseover、onmouseout方法要加在ul身上了，再通过找事件源的方式，改变li背景。加个判断。通过事件源的nodeName判断是不是li，是才做出反应，不是不理它。为了防止nodeName在不同浏览器获取的字母大小写不同，加个toLowerCase()

第二个好处：js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

上面的文件，假如我再新添加个按钮，点击按钮，ul里就新增加个li，如果用传统的方法，for循环为li添加事件，问题就出现了，最开始有的4个li是有onmouseover和onmouseout事件的，但是后来动态生成的li里没有这两个事件处理函数，因为for循环的时候它还没生成。怎么办呢？只能在按钮点击后，生成li，然后再为生成的li再绑定事件，真是麻烦的很。而事件委托的方式就没事，当后来动态生成的li出现的时候，不用做改变，移到它身上，还是变色的，因为事件是绑定在ul身上的。

使用事件委托的优势在于哪里？
1.比如你有1000个li标签，并且要为这1000个li标签绑定事件，通常的做法就是用一个循环，给每个li标签绑定事件，但是这有个什么问题，每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，你内存够吗？

2.减少dom操作，不必访问1000个dom节点。

3.在日常工作中，经常会遇到的一个问题，页面的内容是通过ajax请求获得的，内容数量也是不固定的，就不能先在html里面写死，而是通过动态添加的方法，将标签嵌入到html里面，然而动态添加的标签，在外部绑定事件是无效的，只能在ajax请求结束的时候绑定事件（也就是你的success函数里面），因为一开始绑定事件的时候，这些标签没有获取到，ajax绑定之后才能获取，这样会出现什么问题，没一次ajax请求，我就要给添加的标签绑定事件，是不是又回到了第1点，而且有时候还会出现事件重复绑定的情况，但是你用事件委托不会出现这种情况。

//html

    
1
    
2
    
3


//js

$("#oul").click(function(e){
    //e对象在jquery里面做了兼容处理
    //target目标元素，el即是你点击的对象
    var el = e.target;
    //el是js对象,如果要用jquery请用$(el)
    //el.tagName 对象的标签名，一定要大写
    if(el.tagName === "LI"){
        //你要执行的代码
        console.log(el.innerHTML);
    }
})

原文链接：https://blog.csdn.net/qq_34562689/article/details/79152494

事件委托(事件代理)的作用?

1.支持为同一个DOM元素注册多个同类型事件

2.可将事件分成事件捕获和事件冒泡机制