由于事件处理程序可以为现代Web应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序,在创建GUI的语言 (如#C)中,为GUI中的每个按钮添加一个onclick事件处理程序是司空见惯的事,而且这样做也不会导致什么问题。可是在JavaScript中, 添加到页面上的事件处理程序数量关系到页面的整体运行性能。导致这一问题的原因是多方面的。首页,每个都是对象,都会占用内存;内存中的对象越多,性能就 越差。其次,必须事先指定所有事件处理程序而导致DOM访问次数,会延迟整个页面的交互就绪时间。事实上,从如何利用好事件处理程序的角度出发,还是有一 些方法能够提升性能的。
对“事件处理程序过多”问题的解决方案是事件委托。 蓝狮官网事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如,click事件会一直冒泡到document层次。也就是说,我 们可以为整个页面指定一个onclick事件处理程序,而不必给每个可单击的元素分别添加事件处理程序。以下面的HTML代码为例:
- Go somewhere
- Go somewhere
- Say hi
其中包含3个被单击后会执行操作的列表项。按照传统的做法是,需要像下面这样为它们添加3个事件处理程序:
var item1=document.getElementById(“goSomewhere”);
var item1=document.getElementById(“doSomething”);
var item1=document.getElementById(“sayHi”);
EventUtil.addHandler(item1,”click”,function(event){
location.href=”http://www.keqie.com“;
});
EventUtil.addHandler(item2,”click”,function(event){
document.title=”I changed the document’s title”;
});
EventUtil.addHandler(item2,”click”,function(event){
alert(“Say 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 “doSomething”:
document.title=”I changed the document’s title”;
break;
case “goSomewhere”:
location.href=”http://www.keqie.com“;
break;
case “sayHi”:
alert(“Say hi”);
break;
}
});
在这段代码里,我们使用事件委托只为
0 Comments