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:

 

 1ul.adminLeftNav{}{width:140px;border:1px solid #A8C8EE;border-bottom:0px;list-style:none;margin:0;padding:0;text-align:left;} 
 2ul.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;} 
 4ul.adminLeftNav li:hover{}{background-color:#C4E7DE;} 
 5ul.adminLeftNav li.hover{}{background-color:#C4E7DE;} 
 6ul.adminLeftNav li div{}{display:none;border-top:1px solid #A8C8EE;padding:5px 0;background:#fff;} 
 7ul.adminLeftNav li div a{}{display:block;line-height:20px;text-indent:30px;font-weight:normal;color:#000;text-decoration:none;} 
 8ul.adminLeftNav li div a:hover{}{text-decoration:underline;}
 9
10

 

JavaScript:

 

 1var 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