核心提示:事件委托又称事件代理,下面将要将要简要叙述一下这种方法的原理及优点。一、什么是事件委托?我们看下面的例子:ul id=myLinksli id=goSomewhereGo Somewhere/lili...
事件委托又称事件代理,下面将要将要简要叙述一下这种方法的原理及优点。
一、什么是事件委托?
我们看下面的例子:
<ul id='myLinks'> <li id='goSomewhere'>Go Somewhere</li> <li id='doSomething'>Do Something</li> <li id='sayHi'>Say hi</li> </ul>
假使我们需要对3个li元素添加点击事件:
传统的方法是分别给每个li元素绑定click事件。
假使li元素特别多呢?可能你已经想到这样一个一个添加click事件是相当麻烦的,那么是否有优化方法呢?
当然,我们只需要在ul元素上添加一个事件处理程序。这种在DOM树中尽量最高的层次上添加事件处理程序的方式便是事件委托,主要用于解决“事件处理程序过多”问题。
二、事件委托如何工作?
我们现在的疑问是:ul元素如何知道li元素点击了呢?
很简单,由于所有li元素都是ul元素的子节点,故他们的事件会冒泡,无论点击哪个li元素,实际上都相当于点击了ul元素。
现在产生了另一个问题:ul元素如何知道是在哪个li元素上点击的呢?
我们很容易想到,在ul的事件处理程序中检测事件对象的target属性,就可以得到真正点击的目标元素。
三、事件委托的优点
首先,我们看到添加的事件处理程序减少,可以只有一个事件处理程序。由于每个函数都是对象,对象会占用内存,内存的占用关系到性能。因此第一个优点是:
减少了内存占用,性能更好;
在访问DOM方面,也使得DOM访问次数减少。试想一下,如果要为许多的DOM元素绑定事件,自然需要多次访问DOM元素,设置事件处理程序所需时间更长,整个页面就绪需要的时间越多。因此第二个优点是:
设置事件处理程序所需时间更少,加快了整个页面的交互就绪时间。
假使我们将事件处理程序绑定到document对象上,只要可单击的元素呈现在页面上,就可以立即具备适当的功能。即还会有一个额外的优点:
document很快就可以访问,而且可以在页面生命周期的任何时点添加事件处理程序,而不用等待其他事件完成如DOMContentLoaded、load事件。