文档详情

网页设计与制作教程Web前端开发(第7版)课件:JavaScript事件处理-form事件.pptx

发布:2025-02-13约3.74千字共10页下载文档
文本预览下载声明

form(表单)事件是由HTML表单内的动作触发的事件(应用到几乎所有HTML元素,但最常用在form元素中)。JavaScript事件处理form事件

目录JavaScript事件处理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉与事件冒泡习题10

10.5form事件常用的表单事件见表。

表单事件最常用在form元素中,调用form对象的一般格式为:formname=“表单名”action=“URL”on表单事件名=JavaScript代码method=post…inputtype=表项类型name=表项名value=缺省值on事件名=JavaScript代码……/formform事件的语法格式如下:HTML中:formon事件名=myScript或elementon事件=myScriptJavaScript中:object.on事件名=function(){myScript};JavaScript中使用addEventListener()方法:object.addEventListener(事件名,myScript,false);10.5form事件

9.5.1onsubmit、onreset事件【例10-18】本例应用blur事件,当用户离开文本框时将文本转换为大写。应用select事件,当用户在文本框中选中一些文本时触发事件,显示一个消息框。当提交或重置表单时,触发事件显示一个消息框。本例的HTML文件10-18.html在浏览器中显示如图10-15所示。10.5form事件

!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleform事件属性/titlescripttype=text/javascriptfunctionsubmitForm(){alert(表单已提交!);//显示一个消息框}functionresetForm(){alert(表单已重置!);//显示一个消息框}functionupperCase(){varx=document.getElementById(uname).value;document.getElementById(uname).value=x.toUpperCase();//更改为大写字母}functionshowMsg(){alert(您选中了一些文本!);//显示一个消息框}/script/headbodyformaction=onsubmit=submitForm()onreset=resetForm()method=post用户名:inputtype=textname=unameid=unameonblur=upperCase()请输入英文名字brbr!--当用户离开输入字段时更改为大写--说nbsp;明:textarearows=5cols=22onselect=showMsg()请选中我!/textareabrbr!--当用户在文本框中选中一些文本时时触发事件--inputtype=submitvalue=提交!--当提交表单时触发事件--inputtype=resetvalue=重置!--当重置表单时触发事件--/form/body/html10.5form事件

9.5.2子元素事件事件click、blur、focus、select、change等事件通常用在子元素上。【例10-19】窗体myForm包含了一个文本输入框和两个按钮。当用户单击按钮button1时,窗体的名字将赋给文本输入框;当用户单击按钮button2时,函数showElements将显示一个警告对话框,里面包含了窗体myForm上的每个元素的名称。本例文件10-19.html在浏览器中显示如图10-16所示。10.5form事

显示全部
相似文档