思洋互动网站建设学前班

（4）事件委托

事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件，一般的做法是写一个循环，给每个链接对象绑定事件，HTML代码如下：

1. <h2>Great Web resourcesh2> 
2. <ul id="resources"> 
3. <li><a href="http://opera.com/wsc">Opera Web Standards Curriculuma>li> 
4. <li><a href="http://sitepoint.com">Sitepointa>li> 
5. <li><a href="http://alistapart.com">A List Aparta>li> 
6. <li><a href="http://yuiblog.com">YUI Bloga>li> 
7. <li><a href="http://blameitonthevoices.com">Blame it on the voicesa>li> 
8. <li><a href="http://oddlyspecific.com">Oddly specifica>li> 
9. ul> 

脚本如下：

广州网站建设,网站建设,广州网页设计,广州网站设计

1. // Classic event handling example  
2. (function(){  
3. var resources = document.getElementById('resources');  
4. var links = resources.getElementsByTagName('a');  
5. var all = links.length;  
6. for(var i=0;i<all;i++){  
7. // Attach a listener to each link  
8. links[i].addEventListener('click',handler,false);  
9. };  
10. function handler(e){  
11. var x = e.target; // Get the link that was clicked  
12. alert(x);  
13. e.preventDefault();  
14. };  
15. })(); 

更合理的写法是只给列表的父对象绑定事件，这样可行的原理在于事件是支持冒泡的，代码如下：

广州网站建设,网站建设,广州网页设计,广州网站设计

1. (function(){  
2. var resources = document.getElementById('resources');  
3. resources.addEventListener('click',handler,false);  
4. function handler(e){  
5. var x = e.target; // get the link tha  
6. if(x.nodeName.toLowerCase() === 'a'){  
7. alert('Event delegation:' + x);  
8. e.preventDefault();  
9. }  
10. };  
11. })();