javascriptでは、画面HTML要素の元のイベントをどのように表示し、必要に応じて自分の必要なイベントを作成しますか?

2559 ワード

<!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>