对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事 件处理程序，就可以管理某一类型的所有事件。例如，click 事件会一直冒泡到 document 层次。也就 是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事 件处理程序。以下面的 HTML代码为例。 

       
• Go somewhere

       
• Do something
 
       
• Say hi
 
       

 
       其中包含 3个被单击后会执行操作的列表项。按照传统的做法，需要像下面这样为它们添加 3个事 件处理程序。 
       var item1 = document.getElementById("goSomewhere"); 
       var item2 = document.getElementById("doSomething");
       var item3 = document.getElementById("sayHi"); 

       EventUtil.addHandler(item1, "click", function(event){
              location.href = "http://www.jxbh.cn"; 
       }); 

       EventUtil.addHandler(item2, "click", function(event){ 
           document.title = "I changed the document's title"; 
       }); 

       EventUtil.addHandler(item3, "click", function(event){
               alert("hi"); 
       });
       如果在一个复杂的 Web 应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不 清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在 DOM树中尽量高的层次上添加一个事件处理程序，下面由南昌网站建设公司百恒网络前端工程师结合完整实例作一个介绍，如如下面的例子所示。 
       


       
       


       

             
• Go somewhere

             
• Do something

             
• Say hi

       

       


       在这段代码里，我们使用事件委托只为

元素添加了一个 onclick 事件处理程序。由于所有列 表项都是这个元素的子节点，而且它们的事件会冒泡，所以单击事件终会被这个函数处理。我们知道， 事件目标是被单击的列表项，故而可以通过检测 id 属性来决定采取适当的操作。与前面未使用事件委 托的代码比一比，会发现这段代码的事前消耗更低，因为只取得了一个 DOM元素，只添加了一个事件 处理程序。虽然对用户来说终的结果相同，但这种技术需要占用的内存更少。所有用到按钮的事件（多 数鼠标事件和键盘事件）都适合采用事件委托技术。 
       如果可行的话，也可以考虑为 document 对象添加一个事件处理程序，用以处理页面上发生的某种 特定类型的事件。这样做与采取传统的做法相比具有如下优点。
        ◎document 对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序 （无需等待 DOMContentLoaded 或 load 事件）。换句话说，只要可单击的元素呈现在页面上， 就可以立即具备适当的功能。 
       ◎在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的 DOM引用更少， 所花的时间也更少。 
       ◎整个页面占用的内存空间更少，能够提升整体性能。 
       最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup 和keypress。 虽然 mouseover 和mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。 （因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发 mouseout 事件。） 
   本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌APP开发公司-百恒网络 http://www.jxbh.cn/app/index.html 如转载请注明出处!