事件委派

今天我们来学习JavaScript的事件委派，下面跟我来学习一下吧！

在看代码之前，我们先来了解一下什么叫事件委派。

事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

换句话说，就是把一个本来让下属干的事情交给上司做了。

比如说，鼠标点击事件，本来页面上有很多的鼠标点击事件，需要一个个的去写实现函数，但是如果你把鼠标点击事件交个上司来完成，那么就是你鼠标点击那里的时候，就相当于上司找对应的下属来完成此事件，而不像前面的一个个的去找实现函数。很简单的例子就是给ul中的li加事件：

如果给每个li添加点击事件，：

上面的代码alert（li[i].innerHTML）每次运行时都需要 查询li[i].innerHTML的值，且为每一个li都添加了点击事件，这显然会影响代码性能。

这样做有两个很明显的弊端：

1.很耗费资源，因为这种方式是给每个li都加上了事件，li的个数少的话还没事，如果li多的话会很耗费资源。

2.如果后期动态添加li，不会拥有这个弹出事件。

针对以上问题，可以用事件委派来解决。

我们换做事件委托来看看。

 

这样做的好处就是不在进行查询，减少了DOM操作，极大地改善了代码性能。

如果大家对于事件委派可改善性能这一点不太明白，可以看看下面两个例子：

如果大家不是很好理解，下面给大家提供几个例子：

例子一：