今天我们来学习JavaScript的事件委派,下面跟我来学习一下吧!
在看代码之前,我们先来了解一下什么叫事件委派。
事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
换句话说,就是把一个本来让下属干的事情交给上司做了。
比如说,鼠标点击事件,本来页面上有很多的鼠标点击事件,需要一个个的去写实现函数,但是如果你把鼠标点击事件交个上司来完成,那么就是你鼠标点击那里的时候,就相当于上司找对应的下属来完成此事件,而不像前面的一个个的去找实现函数。很简单的例子就是给ul中的li加事件:
如果给每个li添加点击事件,:
上面的代码alert(li[i].innerHTML)每次运行时都需要 查询li[i].innerHTML的值,且为每一个li都添加了点击事件,这显然会影响代码性能。
这样做有两个很明显的弊端:
1.很耗费资源,因为这种方式是给每个li都加上了事件,li的个数少的话还没事,如果li多的话会很耗费资源。
2.如果后期动态添加li,不会拥有这个弹出事件。
针对以上问题,可以用事件委派来解决。
我们换做事件委托来看看。
这样做的好处就是不在进行查询,减少了DOM操作,极大地改善了代码性能。
如果大家对于事件委派可改善性能这一点不太明白,可以看看下面两个例子:
如果大家不是很好理解,下面给大家提供几个例子:
例子一: