JavaScript脚本语言(三).ppt
WEB 编 程计算机科学与技术系XXX 第七讲 JavaScript脚本语言（三）内容回顾JavaScript 内置函数定义函数调用函数JavaScript 对象（String 对象、Math 对象、Date 对象）Window 对象（Document 对象、Event 对象、Frame 对象、History对象、Location 对象、Navigator 对象、Screen 对象）本讲内容事件处理概念onClick事件onChange事件onFocus 事件和onBlur事件onMouseOver事件onMouseOut事件onLoad事件onSubmit事件onMouseDown事件 和 onMouseUp事件 表单元素事件处理 小结作业布置事件处理事件是发生并被处理的操作事件是发生并被处理的操作事件：电话铃响事件：电话铃响处理事件处理事件JavaScript 事件处理程序JavaScript 事件处理程序是指诸如鼠标单击、鼠标移动等事件发生时执行的一组语句onClick事件能够触发onClick事件的窗体元素：Button（Submit、Reset 和 Normal）CheckboxRadio buttonText boxText areaLinkonClick事件事件处处理程序理程序单击表单元素触发onClick事件onClick事件事件处处理程序理程序浅浅蓝蓝色色浅黄色浅黄色浅浅绿绿色色能够触发能够触发 onChange 事件的表单元素：事件的表单元素：Select Text TextareaonChange事件onChange事件事件处处理程序理程序functiondisplay()varnewValue;newValue=F1.S1.value;+newValue)alert(您已将您已将选项选项更改更改为为+newValue)监视监视器器鼠鼠标标CPUonFocus 事件能够触发onFocus事件的窗体元素：ButtonTextTextareaPasswordCheckboxLayerWindowSelectSubmitResetonBlur事件能够触发 onBlur事件的窗体元素：ButtonTextTextareaPasswordCheckboxLayerWindowSelectSubmitResetonFocus事件和onBlur事件 示例onMouseOver事件单击单击此此处处使用使用onMouseOver和和onMouseOutvarnum=0;functionshowLink(num)if(num=0)document.forms0.elements0.value=鼠鼠标标在在选择选择区域外面区域外面;if(num=1)document.forms0.elements0.value=鼠鼠标标在澳大利在澳大利亚亚上面上面;if(num=2)document.forms0.elements0.value=鼠鼠标标在新加坡上面在新加坡上面;if(num=3)document.forms0.elements0.value=鼠鼠标标在法国上面在法国上面;onMouseOut事件澳大利澳大利亚亚新加坡新加坡法国法国onLoad事件您好！您好！onSubmit事件onSubmit事件事件处处理程序示例理程序示例vardataOK=false;functioncheckData()if(document.myForm.threeChar.value.length=3)returntrue;elsealert(请刚请刚好好输输入入3个字符。个字符。+document.myForm.threeChar.value+无效。无效。);returnfalse;输输入入3个字符：个字符：能够触发onMouseDown事件和onMouseUp事件的窗体元素：ButtonDocumentLink 使用使用MouseDown和和MouseUPINPUTtype=buttonname=text1value=更改更改颜颜色色onMouseDown=(document.bgColor=aqua)onMouseUp=(document.bgColor=limegreen)onMouseDown事件 和 onMouseUp事件 表单元素简介 2-1onclick表单元素事件处理程序在以下情况下触发文本框onBlur文本框失去焦点文本框失去焦点onChange文本框的文本框的值值被修改被修改onFocus文本框接收焦点文本框接收焦点onSelect文本框的文本框的值值被被选选定定文本区onBlur光光标标退出文本区域退出文本区域onChange文本区的文本区的值值被修改被修改onFocus文本区接收焦点文本区接收焦点onSelect文本区内的文本区内的值值被被选选中中表单元素简介 2-2表单元素事件处理程序在以下情况下触发命令按钮onBlur按按钮钮失去焦点失去焦点onClick按按钮钮被被单击单击onMouseDown鼠鼠标标按按钮钮被按下被按下onMouseUp鼠鼠标标按按钮钮被被释释放放onFocus按按钮钮接收焦点接收焦点选择框onBlur复复选选框失去焦点框失去焦点onClick复复选选框被框被选选定或取消定或取消选选定定onFocus复复选选框接收焦点框接收焦点Textbox的的onBlur事件事件处处理程序理程序输输入一个入一个值值文本框 3-1onBluronBlurHTML文本框 3-2onChangeonChangeTextbox的的onChange事件事件处处理程序理程序输输入入一一个个值值世界在浏览器窗口中，如果文本框接收焦点，则会调用 onFocus 事件处理程序。当用户按下键盘上的 Tab 键，或用鼠标单击文本框时，将会激活事件处理程序，并调用与事件处理程序相关的函数如果用户在文本框内选择值，将会调用 onSelect 事件处理程序。选择值既可以使用鼠标，也可以使用键盘 文本框 3-3onFocusonSelectonFocusonSelectFocus方法和方法和Select方法方法functiondoSelect()document.myForm.myTextarea.select();functiongetFocus()document.myForm.myTextarea.focus();functionischange()alert(文本区中的内容已文本区中的内容已经经改改变变！);反反馈馈：请请在此在此输输入您的建入您的建议议。您的建。您的建议议有助于我有助于我们们改改进进服服务务。文本区I命令按钮 2-1按钮类型事件处理程序在以下情况下触发submitonSubmit在在单击单击“提交提交”按按钮时钮时resetonClick在在单击单击“重置重置”按按钮时钮时Button对对象象vartextarr=newArray(学学习习JavaScript很有趣很有趣,JavaScript用于客用于客户户端端验证验证,JavaScript入入门门一点也不一点也不难难);functionrtext(f)varindex=Math.floor(Math.random()*3);f.rantext.value=textarrindex;JavaScript 用于客户端验证 命令按钮 2-2Submitbutton对对象和象和Resetbutton对对象象functionvalidate(frm)if(frm.pwd.value.length=0)alert(请输请输入密入密码码);returnfalse;elseif(frm.pwd.value=frm.rpwd.value)alert(欢欢迎迎);returntrue;elsealert(密密码码不匹配不匹配);returnfalse;用用户户登登录录用用户户名名：密密码码：重新重新键键入密入密码码：jsmith*复选框CHECKBOX对象对象functionrfocus(f)f.form.t1.value=f.value+receivedfocus;functionreg(news)varletters=;varflag=0;for(i=0;inews.length;i+)if(newsi.checked=true)flag=1;letters+=newsi.value+n;if(flag=1)document.write(以下是您订阅的时事通讯以下是您订阅的时事通讯);document.write(letters+);elsealert(您尚未选择时事通讯您尚未选择时事通讯);欢迎订阅时事通讯欢迎订阅时事通讯请选择您要订阅的时事通讯：请选择您要订阅的时事通讯：CC+C#JAVAVisualBasicOracleSQLServerOracle received focusC received focusC+received focus单选按钮对象 3-1名称说明checked通过布尔值指定按钮的状态form指定包含元素的表单name设置控件按钮的名称type指定元素的类型value设置选项按钮的值属性属性单选按钮对象 3-2表单元素事件处理程序在以下情况下触发单选按钮onBlur单选按钮失去焦点onClick单选按钮被选定或取消选定onFocus单选按钮接收焦点单选按钮对象 3-3使用使用Optionbutton对对象象functioncheck()gender=document.forms0.gender;answer=document.forms0.answer;txt=;for(i=0;igender.length;i+)if(genderi.checked)txt=txt+genderi.value+;answer.value=您您选择选择了了+txt;请请指定您的性指定您的性别别男男女女您选择了 男 您选择了 女列表框对象 4-1名称说明disabled用指定的布尔值禁用列表multiple可以选择多项form指定包含元素的表单selectedIndex以数字形式检索选定的选项length检索选项元素的数目options作为集合返回选项元素name设置列表名称属性属性列表框对象 4-2名称说明optionsindex.add(option,insertBefore)将元素添加到列表optionsindex.remove(index)从列表中删除元素方法方法表单元素事件处理程序在以下情况下使用列表框onBlur列表框失去焦点onChange选项被选定或取消选定onFocus列表框接收焦点列表框对象 4-3使用事件处理程序使用事件处理程序functionfunc_display()varx=document.forms.myForm.Car;alert(x.optionsx.selectedIndex.text);ToyotaFerrariMercedezToyotaFerrariMercedesFerrariFerrariToyotaFerrariMercedesMercedesMercedez列表框对象 4-4删除选项删除选项functionfunc_remove()varx=document.forms.myForm.mySelect;x.remove(x.selectedIndex);ToyotaFerrariMercedezToyotaFerrariMercedezFerrariToyotaToyotaFerrariMercedez表单验证 表单验证表单验证functionvalidate()f=document.reg_form;if(f.uname.value=)alert(输入姓名输入姓名);f.uname.focus();returnfalse;if(f.gender0.checked=false&f.gender1.checked=false)alert(请指定性别请指定性别);f.gender0.focus();returnfalse;if(f.password.value.length6)|(f.password.value=)alert(请输入至少有请输入至少有6个字符的密码！个字符的密码！);f.password.focus();returnfalse;q=f.email.value.indexOf();if(q=-1)alert(不是有效的电子邮件不是有效的电子邮件);f.email.focus();returnfalse;if(f.age.value99|isNaN(f.age.value)alert(请输入有效的年龄！请输入有效的年龄！);f.age.focus();returnfalse;欢迎来到欢迎来到Aptech姓名：姓名：性别：性别：男男女女密码：密码：电子邮件地址：电子邮件地址：年龄：年龄：John James*J25本讲小结事件处理概念onClick事件onChange事件onFocus 事件和onBlur事件onMouseOver事件onMouseOut事件onLoad事件onSubmit事件onMouseDown事件 和 onMouseUp事件 表单元素事件处理 作业布置简答题无
