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

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事