第九章 事件驱动编程

第九章事件驱动编程介绍JavaScript事件驱动编程的概念和技术，以及常用事件的基本使用方法基本概念事件绑定使用事件对象处理鼠标事件处理键盘事件处理表单事件处理编辑事件处理异常2020/1/1819.1基本概念一、事件事件是指可以被浏览器识别的、发生在页面上的用户动作或状态变化。其中：用户动作:用户对页面的鼠标或键盘操作。例如，click、keypress等状态变化：页面的状态发生变化。例如，load、resize、change等2020/1/1829.1基本概念二、事件驱动事件驱动：程序的一种执行方式，即响应事件的发生而执行相关的程序代码片段在事件驱动执行方式下，程序执行顺序不是完全按照程序代码从头至尾顺序执行，而是依据事件的发生顺序而执行三、事件处理程序事件处理：是对发生事件进行处理的行为、操作事件处理程序：是对发生事件进行处理的程序代码片段2020/1/1839.1基本概念四、事件驱动编程事件驱动编程：是指为需要处理的事件编写相应的事件处理程序事件驱动编程的一般步骤：第1步，确定响应事件的元素第2步，为指定元素确定需要响应的事件类型第3步，为指定元素的指定事件编写相应的事件处理程序第4步，将事件处理程序绑定到指定元素的指定事件2020/1/1849.2事件绑定事件绑定：是指将一个函数与某个HTML元素的事件属性关联起来，使得当相应事件发生时就会触发该函数的执行事件处理程序：使被绑定的函数事件绑定的两种方法静态绑定动态绑定2020/1/1859.2.1事件属性及其分类一、事件属性使用事件属性可以为元素的指定事件绑定事件处理程序事件属性名：在事件名的基础上，加上前缀“on”，如onclick查看HTML元素的事件属性：“标记属性”窗格2020/1/1869.2.1事件属性及其分类二、事件分类1、页面事件：是指因页面状态发生变化而产生的事件，包括onload、onunload、onresize、onabort、onerror等2、鼠标事件：是指用户操作鼠标（点击或移动）而触发的事件，包括onclick、ondblclick、onmousedown等3、键盘事件：是指用户在键盘上敲击、输入时触发的事件，包括onkeypress、onkeydown、onkeyup等4、表单事件：是指与表单或表单控件相关的事件，包括onsubmit、onreset、onchange、onselect、onblur和onfocus等2020/1/1879.2.2静态绑定静态绑定事件：是指将处理事件的程序代码直接指定为HTML元素的事件属性值。如：buttonname=A1onclick=alert('先生,您好!')问侯先生/button函数调用形式：buttonname=A2onclick=hello_girl()问侯小姐/button例9.1放置2个按钮，单击显示不同问候语2020/1/1889.2.3动态绑定动态绑定事件：是指通过语句建立事件绑定形式：对象.事件属性=函数引用;注：对象的事件属性是对函数对象的引用，不能赋值为字符串例9.2放置1个按钮，单击显示一条问候语functionhello(){alert(您好!);}hello_button.onclick=hello;//动态绑定2020/1/1899.2.4绑定多个事件处理函数一、attachEvent()方法元素对象的attachEvent()方法：object.attachEvent(event_name,function_handler)event_name:事件属性名function_handler:函数引用不同点:attachEvent()可以为对象的同一事件绑定多个事件处理函数例9.3为按钮事件绑定多个事件处理函数hello_button.onclick=hello1;hello_button.attachEvent(onclick,hello2);hello_button.attachEvent(onclick,hello3);2020/1/18109.2.4绑定多个事件处理函数二、detachEvent()方法作用:取消由attachEvent()建立的事件绑定：object.detachEvent(event_name,function_handler)注意:取消由赋值型绑定建立的事件绑定：对象.事件属性=null;2020/1/18119.2.5onload事件一、绑定至body元素当onload事件发生时，表明浏览器已将当前HTML文档装载完成，其脚本可以访问页面中的任意元素使用onload事件可以避免在body标签对之间使用script块，从而易于实现HTML代码与脚本程序的分离例9.42020/1/18129.2.5onload事件二、绑定至window对象当为window.onload事件属性绑定onload事件时，相当于为body元素绑定相同的事件解决document.body对象还未生成的问题将onload事件绑定至window对象可以实现HTML代码与脚本程序的完全分离,做法:不使用静态绑定在window.onload事件处理函数中为其他元素动态建立事件绑定例9.52020/1/18139.3使用事件对象9.3.1Event对象通过Event对象，可以访问事件的发生状态，如事件名、键盘按键状态、鼠标位置等信息在IE中，通过window对象的event属性可以访问Event对象只能在事件处理程序中访问Event对象例9.62020/1/18149.3.2事件流事件流是指事件的冒泡传递过程源元素→父元素→根对象（即Document对象）由于存在事件流，因此当一个事件发生时，不仅可以由产生事件的元素响应，也可以由其他元素响应。有些事件（如load、unload、blur、focus等事件）不会传递访问源元素:event.srcElement阻止事件传递:将event.cancelBubble赋值为true例9.72020/1/18159.3.3阻止事件的默认行为默认行为:如单击超链接，鼠标右击页面取消默认处理的两种方法：event.returnValue=false；returnfalse;例9.8当按下Shift键时单击超链接不能显示被链接的文档2020/1/18169.4处理鼠标事件9.4.1鼠标事件鼠标事件:是指用户操作鼠标而触发的事件分类：鼠标点击事件，包括onclick、ondblclick、onmousedown和onmouseup鼠标移动事件，包括onmouseover、onmousemove和onmouseout2020/1/18179.4.2鼠标点击一、鼠标点击事件顺序在onclick事件触发前，依次发生onmousedown、onmouseup在ondblclick事件触发前，依次发生onmousedown、onmouseup、onclick、onmouseup二、使用Event对象的button属性若为1，则左键被按下若为2，则右键被按下若为4，则中键被按下例9.9单击鼠标右键不会显示快捷菜单2020/1/18189.4.2鼠标点击三、使用oncontextmenu事件右击页面元素将触发oncontextmenu（上下文菜单）事件，显示一个快捷菜单禁止显示快捷菜单event.returnValue=false；returnfalse;例9.102020/1/18199.4.3鼠标移动onmousemove:鼠标移动事件onmouseout:移出元素（鼠标离开）事件onmouseover:移入元素（鼠标悬停）事件例9.11鼠标滑过图像效果2020/1/18209.4.4鼠标位置在鼠标事件处理函数中，使用Event对象的x、y等位置属性可以获取鼠标指针的当前位置。例9.12显示鼠标坐标2020/1/18219.5处理键盘事件9.5.1键盘事件键盘事件是指用户操作键盘而触发的事件onkeydown：键按下事件onkeyup：键弹起事件onkeypress：按键事件事件顺序当点击一次字符键时，依次触发onkeydown、onkeypress、onkeyup事件。若按下不放，则持续触发onkeydown和onkeypress事件当点击一次非字符键（如Ctrl键）时，依次触发onkeydown、onkeyup事件。若按下不放，则持续触发onkeydown事件2020/1/18229.5.2识别键盘按键在键盘事件处理函数中，使用Event对象的keyCode属性可以识别用户按下哪个键盘键，该属性值等于用户按下的键盘键对应的Unicode键码值例9.13显示用户键入的字符event.repeat属性表示该事件是否重复2020/1/18239.5.3识别组合键使用Event对象的以下两类属性keyCode属性altKey、ctrlKey和shiftKey属性例9.14取消Ctrl+A选中全部页面内容2020/1/18249.6处理表单事件9.6.1访问表单和表单控件一、访问表单对象form元素定义为Form对象：属性：id、name、action、method、elements方法：submit()、reset()事件：onsubmit、onreset访问方法方法1、document.getElementById(myFormId);方法2、document.forms[myFormName];IE方法：•varmyForm=document.myFormName;•varmyForm=myFormName;2020/1/18259.6.1访问表单和表单控件二、访问表单控件表单控件对象，包括Text、TextArea、Password、Button、Reset、Submit、Radio、Checkbox、Select、Option和Hidden等属性：id、name、value、defaultvalue、disabled、form等方法：focus()、blur()事件：onfocus、onblur2020/1/18269.6.1访问表单和表单控件二、访问表单控件2种访问方法：方法1、使用Form对象的elements集合属性，如：varfirstField=myForm.elements[0];varusernameField=myForm.elements[userName];方法2、直接使用控件名（视为表单的属性），如：varusernameField=myForm.userName;例9.15有“用户”和“密码”字段的登录表单2020/1/18279.6.2表单提交与验证一、表单提交表单提交是指将用户在表单中填写或选择的内容传送给服务器端的特定程序（由form元素的action属性指定，通常是CGI程序或ASP程序）两种提交方法单击“提交”按钮调用Form对象的submit()方法，如：myForm.submit();区别：单击“提交”按钮会触发onsumbit事件2020/1/18289.6.2表单提交与验证二、表单验证表单验证：确定用户提交的表单数据是否合法，例如填写的身份证号码是否有意义、年龄和学历是否相符等问题两种表单验证服务器端表单验证客户端表单验证•避免传送无用数据•方法：使用onsubmit事件例9.16卡号格式为XXXX-XXXX-XXXX-XXXX2020/1/18299.6.3处理按钮对于普通按钮，一般要为其编写onclick事件处理函数例9.17为页面设计3个按钮，当单击它们时分别使页面的背景色变成红、蓝和绿色2020/1/18309.6.4处理文本框文本框：包括单行文本输入框（inputtype=text）和