【JavaScript事件及应用】

迈不过友情╰ 2024-04-06 14:14 71阅读 0赞

### JavaScript中常用的事件 ###

*  基本的事件模型(事件；事件触发时机)

<table style="width:500px;">  &nbsp;JavaScript中基本的事件模型  
 <tbody> 
  <tr> 
   <td>事件</td> 
   <td>事件触发时机</td> 
  </tr> 
  <tr> 
   <td>onblur&nbsp;</td> 
   <td>&nbsp;元素失去焦点后</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>&nbsp;元素值发生改变且已失去焦点后 &nbsp;</td> 
  </tr> 
  <tr> 
   <td>onclick&nbsp; &nbsp; &nbsp;</td> 
   <td>鼠标在元素上单击时 &nbsp; &nbsp;&nbsp;</td> 
  </tr> 
  <tr> 
   <td>ondblclick&nbsp;</td> 
   <td>&nbsp;鼠标在元素上双击时 &nbsp;</td> 
  </tr> 
  <tr> 
   <td>onfocus&nbsp; &nbsp;</td> 
   <td>&nbsp; 元素获得焦点</td> 
  </tr> 
  <tr> 
   <td>onkeydown&nbsp;</td> 
   <td>键盘上某个键被按下时</td> 
  </tr> 
  <tr> 
   <td>onkeypress&nbsp;</td> 
   <td>键盘上某个键被按下并且释放时</td> 
  </tr> 
  <tr> 
   <td>onkeyup&nbsp; &nbsp;</td> 
   <td>键盘上某个键被弹起时</td> 
  </tr> 
  <tr> 
   <td>onload&nbsp;</td> 
   <td>对象装载完毕时页面加载</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>在元素上按下鼠标时</td> 
  </tr> 
  <tr> 
   <td>onmousemove&nbsp;</td> 
   <td>在元素上移动鼠标指针时</td> 
  </tr> 
  <tr> 
   <td>onmouscout&nbsp;</td> 
   <td>鼠标指针移出元素时</td> 
  </tr> 
  <tr> 
   <td>onmouseover&nbsp;</td> 
   <td>&nbsp;鼠标指针移动到元素的上方时 &nbsp;</td> 
  </tr> 
  <tr> 
   <td>onmouseup&nbsp; &nbsp;</td> 
   <td>在元素上释放鼠标时</td> 
  </tr> 
  <tr> 
   <td>onreset&nbsp; &nbsp;</td> 
   <td>&nbsp;表单被重置时</td> 
  </tr> 
  <tr> 
   <td>onselect&nbsp;</td> 
   <td>&nbsp;文本内容被选择时</td> 
  </tr> 
  <tr> 
   <td>onsubmit&nbsp; &nbsp;</td> 
   <td>表单被提交时</td> 
  </tr> 
  <tr> 
   <td>onunload&nbsp;</td> 
   <td>对象被卸载时</td> 
  </tr> 
 </tbody> 
</table>

示例：

表单元素下拉列

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td colspan="1">属性</td> 
   <td>value</td> 
   <td>被选中项的value值</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td>下拉选项的个数</td> 
  </tr> 
  <tr> 
   <td>selectedindex</td> 
   <td>选中项的索引，可以修改选中项</td> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>所有下拉选项的数组</td> 
  </tr> 
  <tr> 
   <td colspan="1">事件</td> 
   <td>onblur</td> 
   <td>下拉列表失去焦点时触发</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>下拉列表获得焦点时触发</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>选项发生改变</td> 
  </tr> 
 </tbody> 
</table>

示例：

<body>
      <table border="" cellspacing="" cellpadding="">
       <tr>
        <td>家庭住址：</td>
        <td>
         <select name="province" id="province" onchange="changeOpt()">
          <option value="请选择省份">--请选择省份--</option>
          <option value="河南省">--河南省--</option>
          <option value="四川省">--四川省--</option>
          <select>
           <select name="cities" id="cities">
           <option value="请选择城市">--请选择城市--</option>
          <select>
        </td>
        <td>
    
        </td>
       </tr>
       <tr>
        <td colspan="3" align="center">
         <input type="button" id="btn" value="提交" />
        </td>
       </tr>
      </table>
      <div id="result">
    
      </div>
      <script type="text/javascript">
       //下拉列表
       function changeOpt(){
        var cityList = new Array();
        cityList['请选择省份'] = ['--请选择城市--'];
        cityList['河南省'] = ['郑州','开封','洛阳','信阳','许昌'];
        cityList['四川省'] = ['成都','锦阳','德阳','自贡','泸州'];
        
        //获取选中的下拉列表选项（省份）
        var province=document.getElementById("province").value
        console.log(province)
        //将下拉列表清空
        document.getElementById("cities").options.length=0
        for (var i = 0; i < cityList[province].length; i++) {
         var opt=new Option(cityList[province][i],cityList[province][i])
         document.getElementById("cities").options.add(opt)
        }
       }
      </script>
    
     </body>