JS的事件委托

 

什么是事件委托

通俗的讲，事件就是click，mouseover，mouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

事件委托的优点是什么

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

小demo

先简单布局如下

我们想要的需求就是当我鼠标点击每个li时打印出li里头的文字，那么通常情况下不用到事件委托的话，我们只好给每个li绑定一个单击事件

可以看到我每次点击后都可以打印出每个Li的文本

那么到这可能很多小伙伴就要说了，既然这样也能做到我们想要的需求，那么事件委托到底好在哪里呢，好的，那我接下来就来告诉小伙伴们它的方便之处吧！

 

当我继续创建Li时可以发现后面创建的Li就没有单击事件了，这么一来就又得重新给新Li绑定单击事件，相对就比较麻烦

这个时候我们来试试事件委托它香不香！！！

当我换成事件委托，把单击事件绑定在Li的父元素UL身上时，可以清楚的发现，不光之前写好了Li有单击事件，后面动态创建出来的Li也能有单击事件了，这么一来就可以省掉很多事了，小伙伴们这个事件委托是不是很方便呢