事件委托技术

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>test01</title>
 6 </head>
 7 <body>
 8     <ul id="myLinks">
 9         <li id="goSomewhere">Go somewhere</li>
10         <li id="doSomething">Do something</li>
11         <li id="sayHi">Say hi</li>
12     </ul>
13     <script type="text/javascript" src="test01.js"></script>
14 </body>
15 </html>

 1 var list = document.getElementById("myLinks");
 2 
 3 EventUtil.addHandler(list, "click", function(event) {
 4     event = EventUtil.getEvent(event);
 5     var target = EventUtil.getTarget(event);
 6 
 7     switch (target.id) {
 8     case "doSomething":
 9         document.title = "I changed the document's title";
10         break;
11 
12     case "goSomewhere":
13         location.href = "http://www.google.com/";
14         break;
15 
16     case "sayHi":
17         console.log("hi");
18         break;
19     }
20 });