js事件委托（事件代理）机制

对于这个概念，看一次忘一次，这次把它记下来，看还会不会忘。

在讲事件委托之前，先补充两个概念：事件冒泡与时间捕获。

1. 事件捕获
   当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件
2. 事件冒泡
   当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件

1、什么是事件委托，JS高级程序上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。举个例子，就拿取快递来说，有两种方法，一种是自己去拿，另一种是委托给门岗代为签收，现实生活中，我们都是采用的第二种方法，这种方法的好处是，就算小区有新住户，门岗也可以代为签收。

用代码说话：

公共代码:

    

        
div1
        
div2
    

非事件委托

有事件委托

对比可以看出，无事件委托的时候，每次新增的节点需要主动添加和其他元素一样的事件。

事件委托后，虽然没有给div1和div2添加点击事件,但是无论是点击div1还是div2,都会打印当前节点。因为其父级绑定了点击事件,点击div1后冒泡上去的时候,执行父级的事件。这样无论后代新增了多少个节点,一样具有这个点击事件的功能。

 

事件委托的优点:

1. 提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
2. 动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。
   例子解析:

 

参考链接：https://www.cnblogs.com/soyxiaobi/p/9498357.html