什么是事件委托呢?
事件委托就是利用事件冒泡机制,指定一个事件处理程序,来管理某一类型的所有事件。这个事件委托的定义不够简单明了,可能有些人还是无法明白事件委托到底是啥玩意。查了网上很多大牛在讲解事件委托的时候都用到了取快递这个例子来解释事件委托,不过想想这个例子真的是相当恰当和形象的,所以就直接拿这个例子来解释一下事件委托到底是什么意思: 公司的员工们经常会收到快递。为了方便签收快递,有两种办法:一种是快递到了之后收件人各自去拿快递;另一种是委托前台MM代为签收,前台MM收到快递后会按照要求进行签收。很显然,第二种方案更为方便高效,同时这种方案还有一种优势,那就是即使有新员工入职,前台的MM都可以代替新员工签收快递。 这个例子之所以非常恰当形象,是因为这个例子包含了委托的两层意思: 首先,现在公司里的员工可以委托前台MM代为签收快递,即程序中现有的dom节点是有事件的并可以进行事件委托;其次,新入职的新员工也可以让前台MM代为签收快递,即程序中新添加的dom节点也是有事件的,并且也能委托处理事件。
为什么要用事件委托呢?
当dom需要处理事件时,我们可以直接给dom添加事件处理程序,那么当许多dom都需要处理事件呢?比如一个ul中有100li,每个li都需要处理click事件,那我们可以遍历所有li,给它们添加事件处理程序,但是这样做会有什么影响呢?我们知道添加到页面上的事件处理程序的数量将直接影响到页面的整体运行性能,因为这需要不停地与dom节点进行交互,访问dom的次数越多,引起浏览器重绘和重排的次数就越多,自然会延长页面的交互就绪时间,这也是为什么可以减少dom操作来优化页面的运行性能;而如果使用委托,我们可以将事件的操作统一放在js代码里,这样与dom的操作就可以减少到一次,大大减少与dom节点的交互次数提高性能。同时,将事件的操作进行统一管理也能节约内存,因为每个js函数都是一个对象,自然就会占用内存,给dom节点添加的事件处理程序越多,对象越多,占用的内存也就越多;而使用委托,我们就可以只在dom节点的父级添加事件处理程序,那么自然也就节省了很多内存,性能也更好。 事件委托怎么实现呢?因为冒泡机制,既然点击子元素时,也会触发父元素的点击事件。那么我们就可以把点击子元素的事件要做的事情,交给最外层的父元素来做,让事件冒泡到最外层的dom节点上触发事件处理程序,这就是事件委托。