事件委托和性能优化

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

<ul id="myul">
 <li id="go">go somewhere</li>
 <li id="do">do something</li>
 <li id="del">delete something</li>
</ul>

<script>
  var myul = document.getElementById('myul');
  EventUtil.addHandler(myul,'click',function(event){
   event = EventUtil.getEvent(event);
   var target = EventUtil.getTarget(event);
   switch(target.id){
    case 'go':doSomething...;break;
    case 'do':doSomething...;break;
    case 'del':doSomething...;break;
   }
  });
</script>

如果可行的话,也可以考虑为document对象添加一个事件处理程序,用以处理页面上发生的某种特定类型的事件。这样做与传统做法相比较有如下优点:
①document对象很快就可以访问,而且可以在页面生命周期的任何时间点上为他添加事件处理程序。
②在页面设置事件处理程序所需时间更少。只添加一个事件处理程序所需的DOM引用更少,所花的时间也更少。
③整个页面占用的内存空间更少,能够提升整体性能。
最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。

原文地址:https://www.cnblogs.com/login123/p/12243456.html