如何运用事件委托优化web页面性能

Question

看资料说事件委托可以减少事件监听数，提高性能。
如果这样的话是否可以将所有的点击事件都写在body里，比如document.body.addEventListener('click',function(e){
    switch(e.target.id){
       case 'id1':
       //dosomething1
       break;
       case 'id2':
       //dosomething2
       break;
    }
},false)这样是否可以达到效率最优化？

Answer 1

你这样能实现的话看着似乎挺好，但不符合面向对象的编程思想，元素自身的事件注册到另一元素去了；
  1.  用id标识的，那意味着使用时必须给每个带事件的标签写上id这本身已经是个很大的隐患了（需要确保不重复），而且很麻烦；
  2.  每增添一个带事件的标签必须修改body上的事件函数，这也很麻烦而且很难维护，当该标签被移除时是不是还要修改body上的事件函数去掉该标签的事件代码以释放资源呢？？

Answer 2

1，同一个页面上id本身就不允许重复的。虽然没有真正用到实践中，但是我认为这样似乎更容易把事件集中管理。
2，每添加一个或者删除一个带事件的标签肯定要修改这个函数，平常我们用click绑定的时候不是也是这样做的吗？现在写事件的方式都不建议直接在页面上用onclick事件直接写了。代码和页面需要做到分离。
3，更方便记录统计用户的行为。

Answer 3

你这样确实是不行的，id的问题还好办，可以制定一个好的命名规范保证不重复
面向对象的优势就是对象的独立性，每移除一个对象时所有相关属性，方法，事件 自动释放；
你这种写法，每移除一个对象需要手动释放事件代码，
单个移除时还将就（其实要精确找出该id的事件代码并不容易，你只有重新给body的事件代码赋值，最好建一个事件代码数组，按id存放事件代码，这样移除时可以从数组中去掉，再连接为代码字符串给body事件赋值），
万一移除的对象包含很多带事件的子对象时你怎么办？？你要先遍历找出其中带事件的标签，然后根据id去掉相关代码，这样的后果说不定效率更低