文档介绍：处理表单和表单元素事件
第十章
内容回顾
事件是网页上发生的操作
每个事件都有与之相关的Event对象
事件有一个生命周期,始于触发事件的操作或条件,终于事件处理程序的最终响应
用户可以指定在生成事件时要执行的,响应该事件的JavaScript代码。这段代码称为事件处理程序
浏览器是用于显示HTML文档内容的应用程序
浏览器还公开了一些可在脚本中访问和使用的对象
Window对象表示浏览器的窗口
模型中的所有其他对象都继承自Window对象,而且是通过Window对象访问的
2
本章目标
处理表单对象及表单元素事件
使用表单对象及表单元素校验用户输入
3
表单对象
表单对象的作用
与用户进行交互
接收并处理用户的输入
表单对象的属性
accept
action
method
elements
表单对象的方法
submit
4
表单对象示例
表单对象示例
<HTML>
<HEAD>
<TITLE>使用表单对象标记</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<Form ACTION="" method="post" name="form1">
<p><input type=text size=20 name="name">
<p><input type="button" value="提交查询"
onClick="();">
<input type="reset" value="重置">
</FORM>
</BODY>
</HTML>
5
表单元素事件
文本域事件
命令按钮事件
复选框事件
单选按钮事件
组合框和列表框事件
6
文本域事件
事件
onFocus
onBlur
onChange
用法
<input type="text" name="名称" size="宽度"
onFocus="接受焦点处理例程; "
onBlur="失去焦点处理例程; "
onChange="改变内容处理例程; "
>
7
文本域事件示例
<HTML>
<HEAD>
<TITLE>文本域对象的事件</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function writeIt(value)
{
alert(value);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<Form name="myfm">
<input type="text" name="first_text"
onFocus="writeIt('焦点');" onBlur="writeIt('模糊');"
onChange="writeIt('修改');">
<TEXTAREA NAME="txt_area " ROWS="10" COLS="10"></TEXTAREA>
</FORM>
</BODY>
</HTML>
文本域事件示例
8
命令按钮事件
事件
onClick
用法
<input type="button" value="值" name="名称"
onClick="单击事件处理例程; "
>
9
命令按钮事件示例
命令按钮事件示例
HTML>
<HEAD>
<TITLE>按钮对象的事件</TITLE>:示例3的输出结果
<SCRIPT LANGUAGE="JavaScript">
function writeIt(value)
{
=value;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<Form name="myfm"><input type="text" name="first_text">
<INPUT TYPE="button" value="复制" onClick="writeIt();">
<input type="text" name="second_text">
</FORM>
</BODY>
</HTML>
10