第13章 Javascript事件分析

Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析Web技术及应用主讲：梁春泉Email:[e-mail]电话：87091546Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析第13章Javascript事件分析2015年11月Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析本章学习目标•了解JavaScript事件类型；•理解事件发生时事件处理的三种方式；•学会利用表单的提交及重置事件对表单的数据进行校验；•理解鼠标事件中的鼠标单击及鼠标移动事件；•掌握常用的键盘及窗口事件。Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.1JavaScript事件概述事件编程:让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。事件-事件是可以被JavaScript侦测到的行为(ACTION)。事件源WindowFormMousekey事件HTML事件突变事件双击事件…事件句柄onclickondblclick编写事件处理代码Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.1.1事件类型鼠标单击：例如单击button、选中checkbox和radio等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table的范围；键盘按键：当按下按键或释放按键时；HTML事件：例如页面body被加载时；在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；突变事件：主要指文档底层元素发生改变时触发的事件，如DomSubtreeModified(DOM子树修改)。事件类型：1.鼠标事件2.键盘事件3.HTML事件4.突变事件Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.1.2事件句柄事件句柄（eventhandler）事件句柄是事件发生要进行的操作。onload属性就是我们所说的事件句柄,也称为事件属性。基本语法：标记事件句柄=“JavaScript代码”…/标记如：bodyonload=“show()”…/body格式：onload=“show();”/*load*/事件处理函数事件句柄事件Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.1.2事件句柄-一览表事件分类事件名称事件句柄事件窗口事件loadonLoad当文档载入时执行JS代码unloadonUnload当文档卸载时执行JS代码表单元素事件changeonChange当元素改变时执行JS代码submitonSubmit当表单被提交时执行JS代码resetonReset当表单被重置时执行JS代码selectonSelect当元素被选取时执行JS代码bluronBlur当元素失去焦点时执行JS代码focusonFocus当元素获得焦点时执行JS代码鼠标事件clickonClick当鼠标被单击时执行JS代码dblclickonDblclick当鼠标被双击时执行JS代码mousedownonMouseDown当鼠标按钮被按下时执行JS代码mousemoveonMouseMove当鼠标指针移动时执行JS代码mouseoutonMouseOut当鼠标指针移出某元素时执行JS代码mouseoveronMouseOver当鼠标指针悬停于某元素之上时执行JS代码mouseuponMouseUp当鼠标按钮被松开时执行JS代码键盘事件keydownonKeyDown当键盘被按下时执行JS代码keypressonKeyPress当键盘被按下后又松开时执行JS代码keyuponKeyUp当键盘被松开时执行JS代码Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.1.3事件处理当一个事件发生时，如果需要截获并处理该事件，只需要定义该事件的事件句柄所关联的事件处理代码，具体的处理方式有以下3种：在HTML标记中的静态指定HTML标记...事件句柄1=事件处理程序[事件句柄2=事件处理程序...]/HTML标记在JavaScript中动态指定事件主角-对象.事件=事件处理程序;编写特定对象特定事件的JavaScriptscripttype=“text/javascript”for=“对象”event=“事件”//事件处理程序代码/scriptWeb技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析scriptlanguage=javascripttype=text/javascriptfunctiontestInfo(mes){alert(mes);}/scriptbodyh2HTML属性的事件处理器举例/h2inputtype=buttonvalue=直接通过JS语句输出信息onclick=alert('单击按钮，直接输出信息')inputtype=buttonvalue=通过函数输出信息onclick=testInfo('单击按钮，调用函数输出信息')/body13.1.3事件处理-直接在HTML标记中指定基本语法：标记...事件句柄1=事件处理程序1[事件句柄2=事件处理程序2...]语法说明：一个标记可以同时指定多个事件处理程序，事件处理程序既可以是script标记中的自定义函数，还可以直接将事件处理代码写在此位置。Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.1.3事件处理-动态绑定来处理事件事件处理程序在JavaScript中动态指定(分配)：事件主角-对象.事件=事件处理程序;obj.onclick=function(){disp();}bodyformname=myformmethod=postaction=inputid=“input”type=“button”name=“mybuttonvalue=提交/formscripttype=text/javascriptfunctionclickHandler(){alert(即将提交表单！);returntrue;}document.getElementById(‘input’).onclick=function(){returnclickHandler();}//动态分配一个事件句柄myform.mybutton.onclick();/script/body人为代码触发事件初始状态没有onclickWeb技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.1.3事件处理-特定对象的特定事件处理程序编写特定对象的特定事件JavaScript代码：scripttype=“text/javascript”for=“对象”event=“事件”//事件处理程序代码/scriptbodyscripttype=text/javascriptfor=windowevent=onloadalert(网页读取完成，欢迎光临！);/scriptp这是特定对象的特定事件处理程序/p/bodyWeb技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.1.4事件处理程序的返回值事件处理程序的返回值在JavaScript中通常事件处理程序不需要有返回值，这时浏览器会按默认方式进行处理；很多情况下需要使用返回值，来判断事件处理程序是否正确进行处理。返回值类型：boolean布尔型值浏览器根据返回值的类型决定下一步如何操作。当返回值为true，进行默认操作；当返回值为false，阻止浏览器的下一步操作。基本语法：事件句柄=“return函数名（参数）;Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.1.4事件处理程序的返回值-案例scriptlanguage=javascriptfunctiontestJs(){if(document.form1.name1.value==){alert(没有输入内容！);returnfalse;}else{alert(欢迎你!+document.form1.name1.value);returntrue;}}/scriptbodyformname=form1action=simple.htmlonsubmit=returntestJs();姓名：inputtype=textname=name1/inputtype=submitvalue=提交//form/body!--simple.html--htmlheadtitle简单测试页面/title/headbodyp这是简单测试页面/p/body/html返回结果为真，跳转到action属性指定的URL上执行Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.2表单事件Form表单是网页设计是一种重要的与用户进行交互的工具，它用于采集用户输入各类信息。表单的事件如表13-1所示。表13-1表单事件句柄和事件的对照事件分类事件句柄事件表单元素事件onchange当元素改变时执行脚本onsubmit当表单被提交时执行脚本onreset当表单被重置时执行脚本onselect当元素被选取时执行脚本onblur当元素失去焦点时执行脚本onfocus当元素获得焦点时执行脚本Web技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.2.1获得及失去焦点事件当表单中的元素获得焦点时会触发Focus获得事件，当表单中的元素失去焦点时会触发Blur失去焦点事件。htmlheadtitle获得/失去焦点测试/titlescriptlanguage=javascript“type=text/javascriptfunctiongetFocus(){document.bgColor=red“;}functionloseFocus(){document.bgColor=blue“;}/script/headbodyformbr/inputtype=“button”onfocus=“getFocus()”value=“获得/失去焦点触发事件onblur=loseFocus()//form/body/htmlWeb技术及应用信息工程学院CollegeofInformationEngineering第13章Javascript事件分析13.2.2提交及重置事件表单的Submit事件触发后会将表单中的数据提交到服务器端，Reset事件触发后会将表单中的数据重置为初始值。bodyformonsubmit=returnsubmitTest();onreset=resetTest()field