一组javascript学习笔记

htm页面：

<script src="js/admin_js.js" language="javascript"></script>
<script language=Javascript>
  document.onclick = clickList;
</script>
<table width="216" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td height="533" background="images/left.jpg" align="center" valign="top">
<div id=div0 style="width:216; position:relative">
  <label id=div0 style="cursor: hand; background:url(images/left_main.jpg); width:216; height:31; text-align:center; color:#f0f0f0; padding-top:12px">部门管理</span></label>
</div> 
  <div id=div0other style="display:None; width:216">
  <label style="background:url(images/left_part.jpg); width:216; height:24; padding-top:8px"><a href="bmgl/show_depart.php" target="mainFrame">
查看部门</a></label>
  <label style="background:url(images/left_part.jpg); width:216; height:24; padding-top:8px"><a href="bmgl/add_depart.php" target="mainFrame">添加部门</a></label>
</div>

javascript:admin_js.js

function clickList() {
  var targetId, srcElement, targetElement;

/*event对象指当前触发的事件对象,　 window.event.srcElement是指触发事件的对象(event:得到或设置触发事件的对象，event.srcElement:指向触发事件的元素)。比如上面htm页面设定document.onclick　 =　  clickList;这时所有页面点击的事件都交给 clickList处理，在 clickList函数里写 srcElement　 =　 window.event.srcElement，知道用户是点击了什么地方，做相应处理。*/
  srcElement = window.event.srcElement;

/*srcElement.className:得到触发事件对象的样式名称，对应上面htm页面class=active */
  if (srcElement.className == "active") {

/*在目标ID后加上"other"字符串，此例即为：div0other,代表子菜单*/
　　 targetId = srcElement.id + "other";
　　 targetElement = document.all(targetId);//当点击母菜单"部门管理后"，显示子菜单"查看部门"、"添加部门"

/*下面，默认子菜单样式为不可见*/
　　 if (targetElement.style.display == "none") {
　　　  targetElement.style.display = "";
　　 } else {
　　　  targetElement.style.display = "none";
　　 }
  }
}