事件委托 

 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></title>
 6 </head>
 7 <body>
 8     <div>
 9         <ul id="menu">
10             <li><a href="menu1.html">menu #1</a></li>
11             <li><a href="menu2.html">menu #2</a></li>
12             <li><a href="menu3.html">menu #3</a></li>
13             <li><a href="menu4.html">menu #4</a></li>
14         </ul>
15     </div>
16     <script type="text/javascript" src="index.js"></script>
17 </body>
18 </html>

 

 

 1 document.getElementById('menu').onclick = function(e) {
 2 
 3     //浏览器 target
 4     e = e || window.event;
 5     var target = e.target || e.srcElement;
 6 
 7     var pageid, hrefparts;
 8 
 9     //只关心hrefs,非链接点击则退出
10     if (target.nodeName !== 'A') {
11         return;
12     }
13 
14     //从链接中找出页面ID
15     hrefparts = target.href.split('/');
16     pageid = hrefparts[hrefparts.length - 1];
17     pageid = pageid.replace('.html', '');
18 
19     //更新页面
20     ajaxRequest('xhr.php?page=' + id, updatePageContents);
21 
22     //浏览器阻止默认行为并取消冒泡
23     if (typeof e.preventDefault === 'function') {
24         e.preventDefault();
25         e.stopPropagation();
26     } else {
27         e.returnValue = false;
28         e.cancelBubble = true;
29     }
30 };
posted @ 2012-06-23 21:17  小猩猩君  阅读(196)  评论(0)    收藏  举报