首页 > 技术文章 > Javascript事件委托

hyqdvd 2016-02-04 15:30 原文

由于事件处理程序可以为现代web应用程序提供交互能力,因此许多开发人员会向页面添加大量的处理程序。在创建GUI的语言(如#C)中,为GUI的每个按钮添加一个onclick事件处理程序是非常常见的事情。可是在Javascript中,添加到页面的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因也是多方面的。首先,每个函数都是对象,都会占用内存;内存中的对象越多,性能越差。其次,必须事先指定所有事件处理函数而导致的DOM访问次数过多会延迟整个页面的交互就绪时间。

 

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如:

按照传统的方法,添加方法如下:

如果在一个复杂的web应用中,对所有可点击元素采用这种方式,显然会相当复杂。如果采用事件委托的方式,只需要添加一个事件处理函数,如下:

事件委托使得父元素的处理函数可以处理子元素产生的事件。由于只有一个事件处理函数,占用的内存较少。

 

推荐阅读