BTC-CS-HTML-01-第9章-JavaScript事件处理课件.pptx

1、第第9 9章章JavaScriptJavaScript事件处理事件处理本章目标本章目标u了解了解事件相关的概念和作用事件相关的概念和作用u掌握掌握常用的事件类型、事件处理机制和原理以及三种注常用的事件类型、事件处理机制和原理以及三种注册事件处理程序的方式册事件处理程序的方式u能够能够灵活的运用事件来实现灵活的运用事件来实现HTMLHTML网页中某些功能的扩展网页中某些功能的扩展2JavaScriptJavaScript事件概述事件概述u事件是可以被事件是可以被 JavaScript JavaScript 侦测到的行为，可以是浏览侦测到的行为，可以是浏览器行为，也可以是用户器行为，也可以是用户行

2、为行为.u通过使用通过使用JavaScriptJavaScript，可以监听特定事件的发生，来实，可以监听特定事件的发生，来实现某些功能的扩展。现某些功能的扩展。3JavaScriptJavaScript事件概述事件概述u事件事件类型类型lUI(User Interface,用户界面)事件，当用户与页面上的元素交互时触发；l焦点事件，当元素获得或失去焦点时触发；l鼠标事件，当用户通过鼠标在页面执行操作时触发；l滚轮事件，当使用鼠标滚轮（或类似设置）时触发；l文本事件，当在文档中输入文本时触发；l键盘事件，当用户通过键盘在页面上执行操作时触发；l合成事件，当为IME（Input MethodEd

3、itor，输入法编辑器）输入字符时触发；l变动（mutation）事件，当底层DOM结构发生变化时触发；4JavaScriptJavaScript事件概述事件概述uUIUI事件事件lUI事件指的是那些不一定与用户操作有关的事件。5事件描述load当页面加载后在window上面触发，当所有框架加载完成后在框架上触发，当图像加载完成后在元素上面触发。unload当页面卸载后在window上面触发abort当用户停止下载过程时，如果嵌入的内容没有加载完，则在元素上触发error当发生JavaScript错误时在window上面触发select当用户选择文本框（input或textarea）或一个字符

4、串时触发resize当窗口或框架大小变化时在window上面触发scroll当用户滚动滚动条的元素中的内容时，在元素上触发JavaScriptJavaScript事件概述事件概述u焦点焦点事件事件l焦点事件会在页面得到焦点或失去焦点时触发。鼠标点击可获得光标（即获得焦点），Tab键可按照设置的Tabindex进行切换焦点。6事件描述focus在得到焦点的元素上触发，这个事件不会冒泡focusIn在得到焦点的元素上触发，这个事件会冒泡DOMFocusIn在得到焦点的元素上触发，这个事件会冒泡DOMFocusOut在失去焦点的元素上触发blur在失去焦点的元素上触发，这个事件不会冒泡focusou

5、t在失去焦点的元素上触发，这个事件会冒泡JavaScriptJavaScript事件概述事件概述u鼠标鼠标事件和滚轮事件和滚轮事件事件l单击类触发顺序：mousedown、mouseup、click、mousedown、mouseup、click、dbclick7事件描述click鼠标单击事件，当单击鼠标（一般为左键）或按下回车键时，会触发事件dbclick鼠标双击事件，当双击鼠标时，会触发事件mousedown当任意按下鼠标键时，会触发事件mouseup当释放鼠标铵键时，会触发事件mouseover当鼠标移动进到当前元素的区域就会触发事件mouseout当鼠标移出当前元素的区域就会触发事件m

6、ousemove当鼠标在当前元素区域内不断移动时，会重复触发事件mousewheel当用户通过鼠标滚轮在垂直方向上滚动页面时（向上或向下），就会触发事件JavaScriptJavaScript事件概述事件概述u事件事件处理处理l相关概念p事件类型（event type）：前面一节已经介绍，在此处不再赘述。p事件目标（event target）：是发生事件或与之相关的对象。window、document和element（元素）对象是最常见的事件目标，当然，AJAX中的XMLHttpRequest对象也是一个事件目标。p事件处理程序（event handler）：是处理或响应事件的函数，它也叫事件

7、监听程序（event listener）。事件处理程序的名字以“on”开头，如：click事件的事件处理程序就是onclick。p事件对象（event object）：是与特定事件相关且包含有关该事件详细信息的对象。8JavaScriptJavaScript事件概述事件概述u事件事件处理处理l常见的事件句柄9事件事件句柄说明changeonChange当元素改变时执行JS代码submitonSubmit当表单被提交时执行JS代码resetonReset当表单被重置时执行JS代码selectonSelect当元素被选取时执行JS代码bluronBlur当元素失去焦点时执行JS代码focusonF

8、ocus当元素获得焦点时执行JS代码clickonClick当鼠标被单击时执行JS代码dblclickonDblclick当鼠标被双击时执行JS代码mousedown onMouseDown当鼠标按钮被按下时执行JS代码mousemove onMouseMove当鼠标指针移动时执行JS代码JavaScriptJavaScript事件概述事件概述u事件事件处理处理l常见的事件句柄(续）10事件事件句柄说明mouseoutonMouseOut当鼠标移出某元素时执行JS代码mouseuponMouseUp当鼠标按钮被松开时执行JS代码keydownonKeyDown当键盘被按下时执行JS代码keyp

9、ressonKeyPress当键盘被按下后又松开时执行JS代码keyuponKeyUp当键盘被松开时执行JS代码loadonLoad当文档载入时执行JS代码unloadonUnload当文档卸载时执行JS代码JavaScriptJavaScript事件概述事件概述u事件事件处理处理l注册事件处理程序的方式有三种p设置HTML标签属性为事件处理程序p设置JavaScript对象属性为事件处理程序。p使用addEventListener和attachEvent函数绑定11JavaScriptJavaScript事件概述事件概述u事件事件处理处理l设置HTML标签属性为事件处理程序p语法为：onXX

10、X=JavaScript Code“pXXX 为事件名称。例如，鼠标单击事件 onclick，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。pJavaScript Code 为处理事件的JavaScript代码，一般是函数。12div1div2div3JavaScriptJavaScript事件概述事件概述u事件事件处理处理l设置JavaScript对象属性为事件处理程序。p通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。p事件处理程序属性名字由“on”后面跟着事件名组成13JavaScriptJavaScri

11、pt事件概述事件概述u事件事件处理处理l设置JavaScript对象属性为事件处理程序。14 var div1=document.getElementById(div1);/*获取id为div1元素的对象，是事件目标对象*/var div2=document.getElementById(div2);/*获取id为div2元素的对象，是事件目标对象*/var div3=document.getElementById(div3);/*获取id为div3元素的对象，是事件目标对象*/div1.onclick=function()/*给div1对象的onclick属性赋值，其值为事件处理函数*/al

12、ert(div1);div2.onclick=function()/*给div2对象的onclick属性赋值，其值为事件处理函数*/alert(div2);div3.onclick=function()/*给div3对象的onclick属性赋值，其值为事件处理函数*/alert(div3);JavaScriptJavaScript事件概述事件概述u事件事件处理处理l使用addEventListener和attachEvent函数绑定p任何能成为事件目标的对象都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。p其中：bool参数可省略，默认为

13、flase，当其为true时，就是在事件捕获过程中注册事件处理程序。15addEventListener(事件类型，事件处理函数,bool)JavaScriptJavaScript事件概述事件概述u事件事件处理处理l使用addEventListener和attachEvent函数绑定16/*获取id为div1元素的对象，是事件目标对象*/var div1=document.getElementById(div1);/*调用div1对象的addEventListener函数 */div1.addEventListener(click,function()alert(div1-bubble);,f

14、alse);div1.addEventListener(click,function()alert(div1-capturing);,true);JavaScriptJavaScript常用事件常用事件u获得获得焦点（焦点（focusfocus）和）和失去失去焦点（焦点（blurblur）事件）事件17 姓名：年龄：JavaScriptJavaScript常用事件常用事件u鼠标移动和鼠标按下事件鼠标移动和鼠标按下事件18姓名：年龄：JavaScriptJavaScript常用事件常用事件uUIUI事件事件lUI事件中的load事件通常用于检测文档内容或者图片是否加载完毕。l事件目标为windo

15、w对象，通过给window对象的onload属性进行赋值，赋值为事件处理函数l当文档加载完毕后，会触发window对象的onload事件，执行事件处理函数体里面代码19window.onload=function()/事件处理JavaScriptJavaScript常用事件常用事件u表单表单事件事件lsubmit事件p通常监测是否提交表单元素，当提交表单元素时会触发，也就是form元素对象.onsumit事件。p需要注意的是，动态表单提交（form.submit()）无法触发onsubmit事件。submit事件常用来进行表单数据验证。20账号：密码：  JavaScrip

16、tJavaScript常用事件常用事件u表单表单事件事件lchange事件p作用域的内容被改变时触发，该事件是在内容改变时还必须使得当前元素失去焦点(onblur)才可以激活。pchange 事件会被HTML的、和 元素触发。21我是一名大学生字体：宋体黑体楷体 本本章章总结总结uJavaScriptJavaScript事件的概念和作用，包含事件、事件类型、事件的概念和作用，包含事件、事件类型、事件目标、事件对象和事件处理程序等概念事件目标、事件对象和事件处理程序等概念。u事件类型（事件类型（UIUI事件、焦点事件、鼠标事件、键盘事件、事件、焦点事件、鼠标事件、键盘事件、滚轮事件、文本事件滚轮

17、事件、文本事件等等u注册注册事件处理程序事件处理程序，3 3中常用方式：设置中常用方式：设置HTMLHTML标签属性标签属性为事件处理程序、设置为事件处理程序、设置JavaScriptJavaScript对象属性为事件处理对象属性为事件处理程序、使用程序、使用addEventListeneraddEventListener和和attachEventattachEvent函数绑定函数绑定。uJavaScriptJavaScript常用事件：获取焦点事件、失去焦点事件、常用事件：获取焦点事件、失去焦点事件、鼠标移动事件、鼠标按下事件、鼠标移动事件、鼠标按下事件、loadload事件、事件、submitsubmit事件、事件、changechange事件等事件等。22谢谢谢谢!23