12 JavaScript事件和对象
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
仲恺农业技术学院计算机科学与工程学院
JavaScript对象及其层次关系
Textarea
Layer
Frame Document Window Location History Anchor Link Image Form Area
Text FileUpload Passward Hidden Submit
仲恺农业技术学院计算机科学与工程学院
文档对象(DOCUMENT)
1.语法 document.属性 2.属性
document.方法
• forms 文件中的所有表单，以数组索引值表示。
• formName以表单名称表示所有表单 • title该文档的标题 • lastModified 文档最后的修改日期。
获取焦点
改变对象的值 在对象上单击鼠标 在对象上双击鼠标 拖拽对象 加载文件或图形时发生错误 按下键盘上的任意键的瞬间 按下键盘上的任意键时 某键被按下后弹起来的瞬间 浏览器读入文件时
MouseMove
MouseOut MouseOver MouseUp Move Resize Select Submit Reset
仲恺农业技术学院计算机科学与工程学院
例：网页修改日期时间
<Script> var update_date = document.lastModified; var formated_date = update_date.substring(0,10); document.write("本网页更新日期：" + update_date + "<BR>") document.write("本网页更新日期：" + formated_date) </Script>
JavaScript的事件处理
主要内容
1、事件 (Event)：鼠标或键盘的动作称为事件 。 2、事件驱动(Event Driver)：由事件引发的一连串 程序的动作，称为事件驱动。 3、事件处理程序(Event Handler)：对事件进行处 理的程序或函数。 4、事件处理程序语法
仲恺农业技术学院计算机科学与工程学院
或 document.表单名称.复选框对象名称.属性 document. 表单名称. 复选框对象名称.方法(参数群)
仲恺农业技术学院计算机科学与工程学院
复选框对象
2.属性 checked 设置该对象的选取状态，为一个布尔变量。 defaultChecked 对应该对象的默认选取状态，为一 个布尔变量。 name 按钮对象的名字(NAME属性) value 按钮的VALUE属性值。 form 按钮所在的表单。 3.方法 blur（） 把焦点从该对象上移开。 focus（） 把焦点移到该对象上。 click（） 再该对象上单击鼠标左键。
仲恺农业技术学院计算机科学与工程学院
表单对象(FORM)
3.常用方法 Submit() 提交表单(与Submit按钮的作用相同)。 reset() 重写表单(与使用reset按钮的作用相同)。 使用方式：
<head> <script> Function check(){ //验证代码 doucument.f1.submit(); } </script> </head> <body> <form name=“f1”> <input type=button onClick=check()/> </form> </body> 仲恺农业技术学院计算机科学与工程学院
仲恺农业技术学院计算机科学与工程学院
Leabharlann Baidu 几个问题：
Alert（）？
上一页中的：
select1.value？？
仲恺农业技术学院计算机科学与工程学院
JavaScript对象层次及DOM模型
浏览器对象有一定的层次，也就是一定 的从属关系。在从属关系中浏览器对象 window反映的是一个完整的浏览器窗口， 它是其他大部分对象的祖先。windows对 象包括location、history和document等。 document对象之下还有下一级对象，包 括forms、links及anchors等等。
仲恺农业技术学院计算机科学与工程学院
处理下拉列表事件
下拉列表是常用的一种网页元素， 一般利用onchange事件来处理。
仲恺农业技术学院计算机科学与工程学院
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> function func() { alert("你选择了：" + select1.value ); } </SCRIPT> </HEAD> <BODY>
<Body onUnLoad="alert('谢谢您，欢迎下次再来！')"> </Body>
JavaScript的事件处理
</Body> • 直接写在对象后面 <Script> document.onLoad = alert('这是事件处理程序'); </Script> 仲恺农业技术学院计算机科学与工程学院
仲恺农业技术学院计算机科学与工程学院
表单对象(FORM)
1.表单对象的使用格式(注意下标从0开始) document.forms[索引值].属性 document.forms[索引值].方法（参数群） 或 document.表单名称.属性 document.表单名称.方法（参数群） 2.常用属性 Name：表单名，相当于<FORM>标记的name属性 Action：相当于<FORM>标记的ACTION属性。 Method：输入窗体的数据传送到服务器上的方式,即 (FORM)标记中的METHOD属性。 Elements：表单中的所有控件，以数组索引值表示
JavaScript的事件处理
1、常见事件
事件 Abort Blur 失去焦点 动作 中止正在加载的对象 事件 Unload MouseDown 动作 关闭当前网页 按下鼠标左键
Focus
Change Click DblClick DrogDrop Error KeyDown KeyPress KeyUp Load
JavaScript的事件处理
3、应用举例 <Body> <FORM name=fff> 请输入基本资料：<BR> 姓名：<INPUT TYPE="text" NAME="usr" SIZE="8"> <INPUT TYPE="button" VALUE=" 请单击 " onClick="alert(fff.usr.value+' :谢谢你!')"> </Body>
仲恺农业技术学院计算机科学与工程学院
复选框对象
4.事件 onBlur、onFocus、onClick、onDblClick、 onKeyDown、onKeyPress、onKeyUp、 onMouseOver、onMouseUp、onMouseOut、 onMouseDown、onMouseMove
移动鼠标指针
鼠标指针离开某对象 鼠标指针悬停于某对象之上 放开鼠标左键 窗口被移动时 窗口大小被改变 选择某对象 单击表单上的Submit按钮 单击表单上的Reset按钮
仲恺农业技术学院计算机科学与工程学院
2、事件处理程序语法 将事件处理程序直接嵌入HTML标记符中 <BODY onLoad = “alert(„这是事件处理程序’)”> 例如： <Body onLoad="alert('您好！欢迎您学习 JavaScript')">
仲恺农业技术学院计算机科学与工程学院
复选框对象
5.举例：选择颜色
<Script> function count() { var checkCount=0; var num = document.form1.elements.length; for (var i=0; i<num; i++) { if (document.form1.elements[i].checked) checkCount++; } alert ("你喜欢 "+ checkCount + "种颜色。") } </Script> <FORM NAME=“form1”> 请选择你喜欢的颜色：<BR> <INPUT TYPE="checkbox" NAME="red">红色 <INPUT TYPE="checkbox" NAME="green">绿色 <INPUT TYPE="checkbox" NAME="blue">蓝色<BR> <INPUT TYPE="button" VALUE="请单击" onClick=“count()”> 仲恺农业技术学院计算机科学与工程学院 </FORM> 运行结果
仲恺农业技术学院计算机科学与工程学院
表单对象(FORM)
2.常用属性 Checkbox：复选框，(该属性本身也是一个对象)。 Hidden：<INPUT TYPE=”HIDDEN”>隐藏对象。 Button：<INPUT TYPE=”BUTTON”>按钮，(该 属性本身也是一个对象)。 Radio：单选按钮，(该属性本身也是一个对象)。 Reset：复位按钮，(该属性自身也是一个对象)。 Submit：提交按钮，(该属性本身也是一个对象)。 Text：单行文本，(该属性本身也是一个对象)。 Textarea:多行文本，(该属性本身也是一个对象)。 Select:<SELECT>选择框，(该属性本身也是一个对 象)。
<P align=center> </P> <P align=center>请选择你的选修课程</P> <P align=center> <SELECT id="select1" name="select1" style="HEIGHT: 22px; WIDTH: 129px" onchange="func()"> <OPTION selected value=网页制作>网页制作 </OPTION> <OPTION value=JavaScript>JavaScript</OPTION> <OPTION value=VbScript>VbScript</OPTION> </SELECT> </P> </BODY> </HTML>
复选框对象
当JavaScript读到<INPUT>标记中的type属性值 为checkbox时，自动建立一个复选框对象，并将该对 象放到表单对象的elements数组当中。
1.使用复选框对象的格式
document.forms[索引值].elements[索引值].属性 document.forms[索引值].elements[索引值].方法(参数群)
课本上的练习题：
多选框问题
仲恺农业技术学院计算机科学与工程学院
呵呵后面的自学了。。。。。 其实原理都一样！
仲恺农业技术学院计算机科学与工程学院
alert(document.forms[0].elements[0].value) alert(document.zheng.userName.value);
仲恺农业技术学院计算机科学与工程学院
文档对象(DOCUMENT)
3.方法 write（字符串）将字符串或数值写到文件中。 getSelection() 取得当前选取的字符串。 4.事件 onClick、onDblClick、onKeyDown、onKeyPress、 onKeyUp、onMouseOver、onMouseUp
仲恺农业技术学院计算机科学与工程学院
表单对象(FORM)
表单对象(Form)提供一个让客户端输入文字或进 行选择的功能，例如：单选按钮、复选框、选择列表等。 由<FORM>标记组构成，JavaScript自动建立一个表 单对象，并将用户端的信息送至服务器进行处理。表单 对象是文件对象的子对象，同时，它也包含许多子对象。
Applet
Radio CheckBox
Cookie
Button Reset
Select Option
仲恺农业技术学院计算机科学与工程学院
窗口对象(WINDOW)
1.功能：顶层对象,用来表示浏览器所打开的窗口。 2.格式 指定窗口： 窗口名.属性 窗口名.方法（参数群）
3.方法 • alert(信息字串)弹出警告信息 •confirm(信息字串)显示确认信息对话框 •prompt(提示字串[，默认值])显示提示信息，并提供可输入 的字段
JavaScript对象及其层次关系
Textarea
Layer
Frame Document Window Location History Anchor Link Image Form Area
Text FileUpload Passward Hidden Submit
仲恺农业技术学院计算机科学与工程学院
文档对象(DOCUMENT)
1.语法 document.属性 2.属性
document.方法
• forms 文件中的所有表单，以数组索引值表示。
• formName以表单名称表示所有表单 • title该文档的标题 • lastModified 文档最后的修改日期。
获取焦点
改变对象的值 在对象上单击鼠标 在对象上双击鼠标 拖拽对象 加载文件或图形时发生错误 按下键盘上的任意键的瞬间 按下键盘上的任意键时 某键被按下后弹起来的瞬间 浏览器读入文件时
MouseMove
MouseOut MouseOver MouseUp Move Resize Select Submit Reset
仲恺农业技术学院计算机科学与工程学院
例：网页修改日期时间
<Script> var update_date = document.lastModified; var formated_date = update_date.substring(0,10); document.write("本网页更新日期：" + update_date + "<BR>") document.write("本网页更新日期：" + formated_date) </Script>
JavaScript的事件处理
主要内容
1、事件 (Event)：鼠标或键盘的动作称为事件 。 2、事件驱动(Event Driver)：由事件引发的一连串 程序的动作，称为事件驱动。 3、事件处理程序(Event Handler)：对事件进行处 理的程序或函数。 4、事件处理程序语法
仲恺农业技术学院计算机科学与工程学院
或 document.表单名称.复选框对象名称.属性 document. 表单名称. 复选框对象名称.方法(参数群)
仲恺农业技术学院计算机科学与工程学院
复选框对象
2.属性 checked 设置该对象的选取状态，为一个布尔变量。 defaultChecked 对应该对象的默认选取状态，为一 个布尔变量。 name 按钮对象的名字(NAME属性) value 按钮的VALUE属性值。 form 按钮所在的表单。 3.方法 blur（） 把焦点从该对象上移开。 focus（） 把焦点移到该对象上。 click（） 再该对象上单击鼠标左键。
仲恺农业技术学院计算机科学与工程学院
表单对象(FORM)
3.常用方法 Submit() 提交表单(与Submit按钮的作用相同)。 reset() 重写表单(与使用reset按钮的作用相同)。 使用方式：
<head> <script> Function check(){ //验证代码 doucument.f1.submit(); } </script> </head> <body> <form name=“f1”> <input type=button onClick=check()/> </form> </body> 仲恺农业技术学院计算机科学与工程学院
仲恺农业技术学院计算机科学与工程学院
Leabharlann Baidu 几个问题：
Alert（）？
上一页中的：
select1.value？？
仲恺农业技术学院计算机科学与工程学院
JavaScript对象层次及DOM模型
浏览器对象有一定的层次，也就是一定 的从属关系。在从属关系中浏览器对象 window反映的是一个完整的浏览器窗口， 它是其他大部分对象的祖先。windows对 象包括location、history和document等。 document对象之下还有下一级对象，包 括forms、links及anchors等等。
仲恺农业技术学院计算机科学与工程学院
处理下拉列表事件
下拉列表是常用的一种网页元素， 一般利用onchange事件来处理。
仲恺农业技术学院计算机科学与工程学院
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> function func() { alert("你选择了：" + select1.value ); } </SCRIPT> </HEAD> <BODY>
<Body onUnLoad="alert('谢谢您，欢迎下次再来！')"> </Body>
JavaScript的事件处理
</Body> • 直接写在对象后面 <Script> document.onLoad = alert('这是事件处理程序'); </Script> 仲恺农业技术学院计算机科学与工程学院
仲恺农业技术学院计算机科学与工程学院
表单对象(FORM)
1.表单对象的使用格式(注意下标从0开始) document.forms[索引值].属性 document.forms[索引值].方法（参数群） 或 document.表单名称.属性 document.表单名称.方法（参数群） 2.常用属性 Name：表单名，相当于<FORM>标记的name属性 Action：相当于<FORM>标记的ACTION属性。 Method：输入窗体的数据传送到服务器上的方式,即 (FORM)标记中的METHOD属性。 Elements：表单中的所有控件，以数组索引值表示
JavaScript的事件处理
1、常见事件
事件 Abort Blur 失去焦点 动作 中止正在加载的对象 事件 Unload MouseDown 动作 关闭当前网页 按下鼠标左键
Focus
Change Click DblClick DrogDrop Error KeyDown KeyPress KeyUp Load
JavaScript的事件处理
3、应用举例 <Body> <FORM name=fff> 请输入基本资料：<BR> 姓名：<INPUT TYPE="text" NAME="usr" SIZE="8"> <INPUT TYPE="button" VALUE=" 请单击 " onClick="alert(fff.usr.value+' :谢谢你!')"> </Body>
仲恺农业技术学院计算机科学与工程学院
复选框对象
4.事件 onBlur、onFocus、onClick、onDblClick、 onKeyDown、onKeyPress、onKeyUp、 onMouseOver、onMouseUp、onMouseOut、 onMouseDown、onMouseMove
移动鼠标指针
鼠标指针离开某对象 鼠标指针悬停于某对象之上 放开鼠标左键 窗口被移动时 窗口大小被改变 选择某对象 单击表单上的Submit按钮 单击表单上的Reset按钮
仲恺农业技术学院计算机科学与工程学院
2、事件处理程序语法 将事件处理程序直接嵌入HTML标记符中 <BODY onLoad = “alert(„这是事件处理程序’)”> 例如： <Body onLoad="alert('您好！欢迎您学习 JavaScript')">
仲恺农业技术学院计算机科学与工程学院
复选框对象
5.举例：选择颜色
<Script> function count() { var checkCount=0; var num = document.form1.elements.length; for (var i=0; i<num; i++) { if (document.form1.elements[i].checked) checkCount++; } alert ("你喜欢 "+ checkCount + "种颜色。") } </Script> <FORM NAME=“form1”> 请选择你喜欢的颜色：<BR> <INPUT TYPE="checkbox" NAME="red">红色 <INPUT TYPE="checkbox" NAME="green">绿色 <INPUT TYPE="checkbox" NAME="blue">蓝色<BR> <INPUT TYPE="button" VALUE="请单击" onClick=“count()”> 仲恺农业技术学院计算机科学与工程学院 </FORM> 运行结果
仲恺农业技术学院计算机科学与工程学院
表单对象(FORM)
2.常用属性 Checkbox：复选框，(该属性本身也是一个对象)。 Hidden：<INPUT TYPE=”HIDDEN”>隐藏对象。 Button：<INPUT TYPE=”BUTTON”>按钮，(该 属性本身也是一个对象)。 Radio：单选按钮，(该属性本身也是一个对象)。 Reset：复位按钮，(该属性自身也是一个对象)。 Submit：提交按钮，(该属性本身也是一个对象)。 Text：单行文本，(该属性本身也是一个对象)。 Textarea:多行文本，(该属性本身也是一个对象)。 Select:<SELECT>选择框，(该属性本身也是一个对 象)。
<P align=center> </P> <P align=center>请选择你的选修课程</P> <P align=center> <SELECT id="select1" name="select1" style="HEIGHT: 22px; WIDTH: 129px" onchange="func()"> <OPTION selected value=网页制作>网页制作 </OPTION> <OPTION value=JavaScript>JavaScript</OPTION> <OPTION value=VbScript>VbScript</OPTION> </SELECT> </P> </BODY> </HTML>
复选框对象
当JavaScript读到<INPUT>标记中的type属性值 为checkbox时，自动建立一个复选框对象，并将该对 象放到表单对象的elements数组当中。
1.使用复选框对象的格式
document.forms[索引值].elements[索引值].属性 document.forms[索引值].elements[索引值].方法(参数群)
课本上的练习题：
多选框问题
仲恺农业技术学院计算机科学与工程学院
呵呵后面的自学了。。。。。 其实原理都一样！
仲恺农业技术学院计算机科学与工程学院
alert(document.forms[0].elements[0].value) alert(document.zheng.userName.value);
仲恺农业技术学院计算机科学与工程学院
文档对象(DOCUMENT)
3.方法 write（字符串）将字符串或数值写到文件中。 getSelection() 取得当前选取的字符串。 4.事件 onClick、onDblClick、onKeyDown、onKeyPress、 onKeyUp、onMouseOver、onMouseUp
仲恺农业技术学院计算机科学与工程学院
表单对象(FORM)
表单对象(Form)提供一个让客户端输入文字或进 行选择的功能，例如：单选按钮、复选框、选择列表等。 由<FORM>标记组构成，JavaScript自动建立一个表 单对象，并将用户端的信息送至服务器进行处理。表单 对象是文件对象的子对象，同时，它也包含许多子对象。
Applet
Radio CheckBox
Cookie
Button Reset
Select Option
仲恺农业技术学院计算机科学与工程学院
窗口对象(WINDOW)
1.功能：顶层对象,用来表示浏览器所打开的窗口。 2.格式 指定窗口： 窗口名.属性 窗口名.方法（参数群）
3.方法 • alert(信息字串)弹出警告信息 •confirm(信息字串)显示确认信息对话框 •prompt(提示字串[，默认值])显示提示信息，并提供可输入 的字段