【网页前端设计Front end】JavaScript教程.下（看不懂你来打我）

￡神魔★判官ぃ 2023-07-11 08:45 6阅读 0赞

### 文章目录 ###

*  onclick事件
 *  onmousedown事件
 *  文本输入框即选择域的内容变化事件onchange
 *  JavaScript表单处理——radio单选钮

JavaScript事件及处理

# onclick事件 #

<html>
    <body>
    <form name=form1>
    	Field:<input type="text" name="field1" value="hello word"><br/>
    	Field:<input type="text" name="field2"><br/><br/>
    	click the button below to copy the content of field1 to field2<br/>
    	<input type="button" value="copytext" onclick="document.form1.field2.value=document.form1.field1.value">
    </form>
    </body>
    </html>

![在这里插入图片描述][20191004163130315.png]

# onmousedown事件 #

button 事件属性  
Event 对象

定义和用法  
button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。

语法  
event.button=0|1|2  
参数 描述  
0 规定鼠标左键。  
1 规定鼠标中键。  
2 规定鼠标右键。

<html>
    <head>
    	<script type="text/javascript">
    		function whichMouseButton(event)
    		{ 
    			if(event.button==2)
    				alert("你点的是鼠标右键")；
    			else
    				alert("你点的是鼠标左键");
    		}
    	</script>
    </head>
    <body onmousedown="whichMouseButton(event)">
    <p> 可以单击鼠标了 </p>
    </body>
    </html>

# 文本输入框即选择域的内容变化事件onchange #

<html>
    <head>
    <script type="text/JavaScript">
         function gosite(oneform)
        { 
            var index=oneform.site.seletctedIndex;
            oneform.stposition.value=oneform.site.options[index].value;
        }		
    </script>
    </head>
    <body>
    <form name="myform">
    	<p>请选择职业</p>
    	<select name="site" onchange="gosite(document.myform)">
    		<option value="一楼一区">学生</option>
    		<option value="一楼二区">教师</option>
    		<option value="二楼一区">工人</option>
    		<option value="二楼二区">农民</option>
    	</select>
    	领取物资地点在<input type="text" name="stposition" value="一楼一区">
    </form>
    </body>
    </html>

![在这里插入图片描述][20191004170717691.png]

# JavaScript表单处理——radio单选钮 #

<html>
    <head>
    <script type="text/JavaScript">
       function sub(){ 
       	var rb;
       	var j=document.myform.agegroup.length;
        var i;
        for(i=0;i<j;i++)
        { 
        	rb=document.myform.agegroup[i];
        	if(rb.checked){ 
        		alert("你选择了"+rb.value)
        		break;
        	}
        }
       }
    </script>
    </head>
    <body>
    <form name="myform" onsubmit="sub()">
    	<fieldset>
    		<legend>分组框</legend>
    		<input name="agegroup" type="radio" value="A">21岁以下<br>
    		<input type="radio" name="agegroup" value="B">21岁到35岁<br>
    		<input type="radio" name="agegroup" value="C">36岁到45岁<br>
    		<input type="radio" name="agegroup" value="D">46岁到65岁<br>
    		<input type="radio" name="agegroup" value="E">65岁以上<br>
    		<input type="submit" value="提交">
    	</fieldset>
    </form>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]

[20191004163130315.png]: https://img-blog.csdnimg.cn/20191004163130315.png
[20191004170717691.png]: https://img-blog.csdnimg.cn/20191004170717691.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191004172927403.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ==,size_16,color_FFFFFF,t_70