JavaScript-----事件委托

一.什么是事件委托

 事件委托也被称为事件代理,在jQuery里称为事件委派

二.事件委托的原理:

1.事件委托就是利用函数的冒泡冒原理，把事件绑定在父元素上面，把所有本该子元素各自处理的事情交给父元素统一处理，达到性能优化的效果

2.不要给每个子节点设置事件监听器,而且事件监听器设置在其父节点上,然后利用冒泡原理设置每个子节点

三.事件委托的作用:

只操作了依次DOM,提高了程序的性能

可以大量节省内存占用，减少事件注册

四.事件委托的核心原理;

给父节点添加监听器,利用事件冒泡影响每一个节点

举个栗子:

比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一 一分发给每个宿舍同学；

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

举个栗子:

如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。

1.  
   <ul>
2.  
   <li>橘子红了</li>
3.  
   <li>橘子红了</li>
4.  
   <li>橘子红了</li>
5.  
   <li>橘子红了</li>
6.  
   <li>橘子红了</li>
7.  
   <li>橘子红了</li>
8.  
   </ul>
9.  
   </body>
10.  
    <script>
11.  
     
12.  
    //获取元素
13.  
    var ul = document.querySelector("ul");
14.  
    ul.addEventListener('click', function (e) {
15.  
    alert('hhh')
16.  
    })

栗子2:

1.  
   <ul>
2.  
   <li>橘子红了</li>
3.  
   <li>橘子红了</li>
4.  
   <li>橘子红了</li>
5.  
   <li>橘子红了</li>
6.  
   <li>橘子红了</li>
7.  
   <li>橘子红了</li>
8.  
   </ul>
9.  
   </body>
10.  
    <script>
11.  
     
12.  
    //获取元素
13.  
    var ul = document.querySelector("ul");
14.  
    ul.addEventListener('click', function (e) {
15.  
    // alert('hhh')
16.  
    // e.target 可以得到点击的对象
17.  
    e.target.style.backgroundColor = 'pink'
18.  
    })

这篇好文章是转载于：学新通技术网