javascript事件委托

Html代码  

1. <ul id="ul">  
2.     <li id="li1">dododo</li>  
3.     <li id="li2">dododo</li>  
4.     <li id="li3">dododo</li>  
5. </ul>  

 如果想对多个li对象进行事件侦听，这时候用事件委托是不二的选择了。事件委托就是利用了事件冒泡，对document中某一个元素进行侦听，其实也就是侦听了其下的所有子元素。

javascript代码如下：

Js代码  

1. var EventUtil = {  
2.     addEvent: function(node, type, listener) {  
3.         if (node.addEventListener) {  
4.             node.addEventListener(type, listener, false); //firefox  
5.         } else {  
6.             node.attachEvent("on"+type, listener); //ie  
7.         }},  
8.     getTarget: function(event){  
9.         return event.target || event.srcElement;  
10.         /** 
11.         在ie下是用event.srcElement，firefox下用event.target 
12.         */  
13.     }     
14. }  
15.   
16. var node = document.getElementById("ul");  
17.       
18. EventUtil.addEvent(node,"click",function(event){  
19.     alert(EventUtil.getTarget(event).id);  
20. });  

 当鼠标单击li元素时，会弹出显示当前li id的警告框，以上代码在ie8, firefox5测试通过