事件委托

由于事件处理程序可以为现代web应用程序提供交互能力，课时再js中，添加到页面的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性难就越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪事件。事实上。从如何利用好事件处理程序角度出发，还是有一些方法能够提升性能的。

 

事件委托

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

<ul id=”myLinks”>

　　<li id=”goSomewhere”>goSomewhere</li>

　　<li id=”doSomething>doSomething</li>

　　<li id=”sayHi”>sayHi</li>

</ul>

 

传统做法：

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.wrox.com”;

});

EventUtil.addHandler(item2,”click”,function(event){

　　alert(“doSomething”)

});

EventUtil.addHandler(item3,”click”,function(event){

　　alert(“hi”)

});

 

如果在一个复杂的web应用程序中，对所有课单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在DOM树种尽量最高层次上添加一个事件处理程序。例如：

var  list=document.getElementById(“myLinks”);

 
EventUtil.addHandler(list,”click”,function(event){

　　Event=EventUtil.getEvent(event);

　　Var target=EventUtil.getTarget(event);

　　Switch(target.id){

　　　　case “goSomewhere”:

　　　　　　location.href=”http://www.wrox.com”;

　　　　　　Break;

　　　　case “doSomething”:

　　　　　　alert(“doSomething”)

　　　　　　Break;

　　　　case “sayHi”:

　　　　　　alert(“hi”)

　　　　Break;

　　}

});

 

在这段代码里，我们使用事件委托只为<ul>元素添加一个onclick事件处理程序。由于所有列表项都是这个元素的子节点，而且他们的事件会冒泡，所以单击事件最终会被这个函数处理。我们真的，事件目标是被单击的列表项，故而可以通过检测id属性来解决采取适当的操作。与前面未使用事件委托的代码比一比，会发下这段代码的事前消耗更低，因为只取得一个dom元素，只添加一个事件处理程序。

如果可行的话，也可以考虑为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。有以下优点：

1、document对象很快就可以访问，而且可以在页面声明周期的任何时点上为它提那家事件处理程序，无需等待load事件。

2、在页面中设置事件处理程序所需的时间更少

3、整个页面占用的内存空间更少，能够提升整体性能。

最适合采用事件委托技术的事件包括click,mousedown,mouseup,keydown,keyup和keypress。