js 性能优化--事件委托

 

考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响。

就像下面这段代码:





js性能优化



  • 精通css

  • 精通js

  • 精通html

  • ......



首先,我们来想下,产生性能问题的根本原因是什么呢?li元素(目标对象)所要进行的事件处理了。怎么可以解决这种囧况呢?

答案就是采用事件委托,将在li对象上面要处理的事件委托给父元素或者祖先元素,即为父元素绑定事件侦听,

看看下面的改进代码:





js性能优化



  • 精通css

  • 精通js

  • 精通html

  • ......



 虽然现在很多框架都已经实现了事件委托,但是作为一个开发人员,用框架的同时我们也应该知道他实现的原理是如何的,知其然,更要知其所以然,下面是我最近在图灵社区看到的(jquery解决方案):http://www.ituring.com.cn/article/467,希望对大家开发有帮助!

你可能感兴趣的:(学习笔记,javascript,性能优化)