事件委托

事件委托

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

一下面的HTML代码为例：

<ul id="mylinks">
<li id="goSomething">Go something</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say Hi</li>
</ul>

其中包含三个被单击后会执行的列表项。按照传统的做法，需要向下面这样为他们添加3个事件处理程序。

var item1=document.getElementById("gosomething");
var item2=document.getElementById("dosomething");
var item3=document.getElementById("sayHi");

EventUtil.addhandler(item1,"click",function(){
location.href="http://www.wrox.com";
});
EventUtil.addhandler(item2,"click",function(){
document.title="I changed the document's title"
});
EventUtil.addhandler(item3,"click",function(){
alert("hi");
});

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

var list=document.getElementById("mylinks");
EventUtil.addhandler(list,"click",function(event){
event=EventUtil.getEvent(event);
var target=EventUitl.getTarget(event);
switch(target.id){
case "doSomething":
document.title="I change the document's title";
break;
case "goSomewhere":
location.href="http://www.wrox.com";
break;
case "sayHi":
alert("sayHi");
break;
}
})

在这段代码里，我们使用事件委托只为ul元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的子节点，而且它们的事件会冒泡，所以事件最终会被这个函数处理。具体关于target等解释，请参考

/article/5560781.html