JS闭包实现给DIV添加事件

结构、动作、行为分离之JS闭包

最近在学习将ＨＴＭＬ/CSS/JavaScript分离 拿出来和大家分享下；

HTML:  

 1 < ul  id ="pmenu"  class ="adminLeftNav" >     
 2      < li  > 菜单1 
 3          < div  id ="p10" >  
 4              < a  href ="#" > ·子菜单 </ a >  
 5              < a  href ="#" > ·子菜单 </ a >  
 6              < a  href ="#" > ·子菜单 </ a >  
 7          </ div >  
 8      </ li >  
 9      < li  > 菜单2 
10          < div  id ="p11" >  
11              < a  href ="#" > ·子菜单 </ a >  
12              < a  href ="#" > ·子菜单理 </ a >  
13              < a  href ="#" > ·子菜单录 </ a >  
14              < a  href ="#" > ·子菜单 </ a >  
15              < a  href ="#" > ·子菜单 </ a >  
16          </ div >  
17      </ li >  
18      < li  > 菜单3 
19          < div  id ="p12" >  
20              < a  href ="#" > ·子菜单 </ a >  
21              < a  href ="#" > ·子菜单 </ a >  
22              < a  href ="#" > ·子菜单 </ a >  
23              < a  href ="#" > ·子菜单 </ a >  
24              < a  href ="#" > ·子菜单 </ a >  
25          </ div >  
26      </ li >  
27      < li  > 菜单4 
28          < div  id ="p13" >  
29              < a  href ="#" > ·子菜单 </ a >  
30              < a  href ="#" > ·子菜单 </ a >  
31              < a  href ="#" > ·子菜单 </ a >  
32              < a  href ="#" > ·子菜单 </ a >  
33              < a  href ="#" > ·子菜单 </ a >  
34          </ div >    
35      </ li >  
36      < li  > 菜单5 
37          < div  id ="p14" >  
38              < a  href ="#" > ·子菜单 </ a >  
39              < a  href ="#" > ·子菜单表 </ a >  
40              < a  href ="#" > ·子菜单 </ a >  
41              < a  href ="#" > ·子菜单 </ a >  
42          </ div >  
43      </ li >  
44      < li  > 菜单6 
45          < div  id ="p15" >  
46              < a  href ="#" > ·子菜单 </ a >  
47          </ div >  
48      </ li >  
49 </ ul >
50

 

CSS:

 

 1 ul.adminLeftNav {} {width:140px;border:1px solid #A8C8EE;border-bottom:0px;list-style:none;margin:0;padding:0;text-align:left;}  
 2 ul.adminLeftNav li {} { line-height:34px;font-size:12px;color:#0B6BB3;font-weight:bold;border-bottom:1px solid #A8C8EE; 
 3background:url(/eaf/images/cmail_7.gif) no-repeat 20px 12px;text-indent:40px;cursor:pointer;background-color:#FFFFFF;}  
 4 ul.adminLeftNav li:hover {} {background-color:#C4E7DE;}  
 5 ul.adminLeftNav li.hover {} {background-color:#C4E7DE;}  
 6 ul.adminLeftNav li div {} {display:none;border-top:1px solid #A8C8EE;padding:5px 0;background:#fff;}  
 7 ul.adminLeftNav li div a {} {display:block;line-height:20px;text-indent:30px;font-weight:normal;color:#000;text-decoration:none;}  
 8 ul.adminLeftNav li div a:hover {} {text-decoration:underline;}
 9
10

 

JavaScript:

 

 1 var  obj1  =  document.getElementById( " pmenu " ).getElementsByTagName( " li " ); 
 2      for ( var  i = 0 ;i < obj1.length;i ++ ) 
 3      { 
 4        //闭包实现给对象添加事件 
 5        (function(){ 
 6            var temp = obj1[i]; 
 7            temp.onmouseover = function(){temp.className='hover';} 
 8            } 
 9         )(); 
10        (function(){ 
11            var temp = obj1[i]; 
12            temp.onmouseout = function(){temp.className='';} 
13            } 
14         )(); 
15         (function(){            
16            var x = i; 
17            obj1[x].onclick = function(){showChildMenu('P1'+x,'#');} 
18            } 
19         )(); 
20    }  
21
22      function  showChildMenu(id,url) { 
23        var obj = document.getElementById("pmenu").getElementsByTagName("div"); 
24        for(var i=0;i<obj.length;i++) 
25        { 
26            obj[i].style.display='none'; 
27        } 
28        if(id!='') 
29            document.getElementById(id).style.display='block'; 
30    }
31

 

转载于:https://www.cnblogs.com/jwb_bino/archive/2009/04/03/1428981.html