改变select元素原来的事件属性,并加快捷键-优快云博客

本文介绍了一种使用JavaScript自定义事件处理的方法，包括如何屏蔽HTML元素原有的事件，并创建新的事件处理逻辑，例如通过键盘按键控制下拉菜单选择及将选择结果附加到文本框。

Js代码  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
 <HEAD>  
  <TITLE> New Document </TITLE>  
  <META NAME="Generator" CONTENT="EditPlus">  
  <META NAME="Author" CONTENT="">  
  <META NAME="Keywords" CONTENT="">  
  <META NAME="Description" CONTENT="">  
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
<script language="javascript">  
    //将选择的select元素的值追加到输入框中原来数据的后面  
function connectSex(){  
    var sexTextObj=document.form1.sexText;  
    var sexObj=document.form1.sex;  
    var sexValue=sexObj.options[sexObj.selectedIndex].value;  
    if(sexTextObj.value=="" || sexTextObj.value==null){  
        sexTextObj.value=sexValue;  
        }else{  
            sexTextObj.value=sexTextObj.value+"、"+sexValue;  
            }  
    }  
  
//目的在于学习如何屏蔽HTML元素原来已经有的事件，建立新的事件  
function selectEvent(){  
    if(event.keyCode==38 ||event.keyCode==40){  
        //使HTML元素原来默认的事件失效  
          event.returnValue=false;   
            var selectObj=document.form1.sex;  
        var currentIndex=selectObj.selectedIndex;  
          //如果是上键:只是选中  
          if(event.keyCode==38 ){  
            //alert("上键--"+currentIndex);  
            if(currentIndex==0){  
                return false;  
                }else{  
                    selectObj.options[currentIndex-1].selected=true;  
                    return;  
                    }             
            }  
           //如果是下键  
          if(event.keyCode==40 ){  
                //alert("下键--"+currentIndex+"selectObj.options.length:"+selectObj.options.length);  
            if(currentIndex==selectObj.options.length-1){  
                return false;  
                }else{  
                    selectObj.options[1].selected=true;  
                    return ;  
                    }             
            }  
        }  
        //如果是空格键，则把选中的内容添加文本域中  
        if(event.keyCode==32){  
            connectSex();  
            }  
    }  
    </script>  
 </HEAD>  
  
 <BODY>  
  <form method="post" name="form1" action="">  
   <input type="text" name="text1" value="text1"/>  
   <input type="text" name="text2" value="text2"/><br/>  
   <select name="sex" onChange="connectSex()" onkeydown="selectEvent()">  
    <option value="girl">女</option>       
    <option value="boy">男</option>  
  </select>  
    <!--Tab键会自动跳过hidden类的控件-->  
   <input type="hidden" name="text3" value="text3">  
   <input type="text" name="sexText" value=""/>  
     
  </form>  
 </BODY>  
</HTML>  

select 元素的onmousewheel事件即滚轮转时的事件会改变当前选项,并触发onChange事件,通过onmousewheel="return false;" 来屏蔽此事件.

onkeydown是给select 元素加快捷键,上、下键改变当前的选项，按回车将select的值插入一文本域，代码如下。

Html代码  
<select name="commonNativeLanguage" style="width:150px"  
onkeydown="selectEvent('commonNativeLanguage')"  
onChange="connectTextLangueCommonNative()"  
onmousewheel="return false;">  