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