JS控制通过取得网页中的某个元素来控制事件

在网页的很多元素中,我们可以不直接写该元素的触发事件,而是通过获取该元素的ID,然后再添加相应的事件.好处是可以将所有事件统一写在一个JS中方便管理.例如:

 

<ul class="sFrm">
      <input id='hdnId' type='hidden' name='id' class='categoryData'
       value='0' />
      <input id='hdnType' type='hidden' name='type' class='categoryData'
       value='1' />
      <input id='hdnParentId' type='hidden' name='parentId'
       class='categoryData' value='0' />
      <li>
       <b><span class="icoImp"> </span> 性质：</b>
       <div class="itemFm">
        <input id='rdoTypeIn' type="radio" name="r1" value='1'
         class='chkType' checked="checked" />
        收入&nbsp;&nbsp;
        <input id='rdoTypeOut' value='0' class='chkType' type="radio"
         name="r1" />
        支出
       </div>
       <div class="clear0"></div>
      </li>
      <li>
       <b><span class="icoImp"> </span> 收支项目名称：</b>
       <input id='txtCategoryName' maxlength='8' name='categoryName'
        type="text" class="sIpt2 itemFm categoryData" maxlength='20' />
       <div class="clear0"></div>
      </li>
      <li>
       <b><span class="icoImp"> </span> 从属收支项目：</b>
       <div class="itemFm">
        <input id='rdoFirstLevel' type="radio" name="r2"
         checked="checked" />
        一级收支项目
        <br />
        <input id='rdoSubLevel' type="radio" name="r2" />
        从属于
        <select id='selInCategories' style="width: 100px">
         <option value='1|61260031'>
          工资
         </option>
         <option value='1|61260032'>
          奖金
         </option>
         <option value='1|61260033'>
          分红
         </option>
         <option value='1|61260034'>
          投资收入
         </option>
         <option value='1|61260035'>
          礼金
         </option>
         <option value='1|61260036'>
          兼职
         </option>
         <option value='1|61260037'>
          其他收入
         </option>
        </select>
        <select id='selOutCategories' style="width: 100px">
         <option value='0|61260038'>
          交通
         </option>
         <option value='0|61260044'>
          饮食
         </option>
         <option value='0|61260048'>
          服饰美容
         </option>
         <option value='0|61260053'>
          日常开支
         </option>
         <option value='0|61260060'>
          教育培训
         </option>
         <option value='0|61260061'>
          通讯电话费
         </option>
         <option value='0|61260062'>
          文化/娱乐
         </option>
         <option value='0|61260063'>
          卫生医疗费
         </option>
         <option value='0|61260064'>
          孝敬父母
         </option>
         <option value='0|61260065'>
          子女培养
         </option>
         <option value='0|61260066'>
          人情往来
         </option>
         <option value='0|61260067'>
          其他开支
         </option>
        </select>
       </div>
       <div class="clear0"></div>
      </li>

 

 

 

 

JS的控制函数:显示的效果是页面刚加载的时候支出下拉框不显示,当点收入则显示收入的下拉框,隐藏支出下拉框,当点支出,则显示支出下拉框隐藏收入下拉框

<script type="text/javascript">
<!--
 document.getElementById('selOutCategories').style.display = "none";
 var buttonin = document.getElementById('rdoTypeIn');
 if(buttonin)
 {
  
  buttonin.onclick=function()
  {
   document.getElementById('selOutCategories').style.display = "none";
   document.getElementById('selInCategories').style.display = "";
  
  }
 }
 var buttonout = document.getElementById('rdoTypeOut');
 if(buttonout)
 {
  
  buttonout.onclick=function()
  {
   document.getElementById('selInCategories').style.display = "none";
   document.getElementById('selOutCategories').style.display = "";
  }
 }
//-->
</script>