1. Form对象的常用属性、方法和事件
• 引用form中的元素对象
– 通过元素的名称
document.form1.username
– 通过form的元素数组对象的方法
document.form1.elements[0]
document.form1.elements[“username”]
2. JavaScript 事件
事件名 |
说明 |
onClick |
鼠标单击 |
onChange |
文本内容或下拉菜单中的选项发生改变 |
onFocus |
获得焦点,表示文本框等获得鼠标光标。 |
onBlur |
失去焦点,表示文本框等失去鼠标光标。 |
onMouseOver |
鼠标悬停,即鼠标停留在图片等的上方 |
onMouseOut |
鼠标移出,即离开图片等所在的区域 |
onMouseMove |
鼠标移动,表示在<DIV>层等上方移动 |
onLoad |
网页文档加载事件 |
onSubmit |
表单提交事件 |
onMouseDown |
鼠标按下 |
onMouseUp |
鼠标弹起 |
3.文本框对象 – 事件处理程序
文 本 框 |
事件 |
onBlur |
文本框失去焦点 |
onChange |
文本框的值被修改 |
||
onFocus |
光标进入文本框中 |
||
方法 |
focus( ) |
获得焦点,即获得鼠标光标 |
|
select( ) |
选中文本内容,突出显示输入区域 |
||
属性 |
readOnly |
只读,文本框中的内容不能修改 |
<INPUT type="submit"name="button1" value="提交">
<INPUT type="reset"name="button2" value="重置">
<INPUT type="button"name="button3" value="计算">
4.按钮 - 事件处理程序
表单元素 |
事件处理程序 |
说明 |
命令按钮 |
onSubmit |
表单提交事件,单击“提交”按钮时产生,此事件属于<FORM>元素,不属于提交按钮 |
onClick |
按钮单击事件 |
onSubmit事件处理代码:
<FORM onSubmit=”return 调用函数名”>…</FORM>
如果函数返回true,则向远程服务器提交表单;
如果函数返回false,则取消提交。
例如:
function check( )
{
var userName=document.myform.userName.value;
var pass1=document.myform.pass1.value;
varpass2=document.myform.pass2.value;
if (pass1==pass2)
{
if (pass1.length!=0)
{
document.write("<H2>恭喜您,注册成功!欢迎
"+userName+"光临!</H2>");
return true;
}
else
{
alert("密码不能为空!\n请输入密码");
return false;
}
}
else
{
alert("确认码必须和输入的密码相同!");
return false;
5.复选框:
<INPUT type=“checkbox” value=“电影”> 电影
复选框 |
事件 |
onBlur |
复选框失去焦点 |
onFocus |
复选框获得焦点 |
||
onClick |
复选框被选定或取消选定 |
||
属性 |
checked |
复选框是否被选中,选中为true,未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中 |
|
value |
设置或获取复选框的值 |
6.单选框:
<INPUT type=“radio” value=“M”>男
7.下拉列表框:
<SELECT name="myselect" >
<OPTION>--请选择开户帐号的城市--</OPTION>
下拉列表框 |
事件 |
onBlur |
下拉列表框失去焦点 |
onChange |
当选项发生改变时产生 |
||
onFocus |
下拉列表框获得焦点 |
||
属性 |
value |
下拉列表框中,被选选项的值 |
|
options |
所有的选项组成一个数组,options表示整个选项数组,第一个选项即为options[0],第二个即为options[1],其他以此类推 |
||
selectedIndex |
返回被选择的选项的索引号,如果选中第一个返回0,第二个返回1,其他类推 |