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

1、第9章JavaScript事件处理本章目标了解事件相关的概念和作用掌握常用的事件类型、事件处理机制和原理以及三种注册事件处理程序的方式能够灵活的运用事件来实现HTML网页中某些功能的扩展2JavaScript事件概述事件是可以被 JavaScript 侦测到的行为，可以是浏览器行为，也可以是用户行为.通过使用JavaScript，可以监听特定事件的发生，来实现某些功能的扩展。3JavaScript事件概述事件类型UI(User Interface,用户界面)事件，当用户与页面上的元素交互时触发；焦点事件，当元素获得或失去焦点时触发；鼠标事件，当用户通过鼠标在页面执行操作时触发；滚轮事件，当使用

2、鼠标滚轮（或类似设置）时触发；文本事件，当在文档中输入文本时触发；键盘事件，当用户通过键盘在页面上执行操作时触发；合成事件，当为IME（Input MethodEditor，输入法编辑器）输入字符时触发；变动（mutation）事件，当底层DOM结构发生变化时触发；4JavaScript事件概述UI事件UI事件指的是那些不一定与用户操作有关的事件。5事件描述load当页面加载后在window上面触发，当所有框架加载完成后在框架上触发，当图像加载完成后在元素上面触发。unload当页面卸载后在window上面触发abort当用户停止下载过程时，如果嵌入的内容没有加载完，则在元素上触发error当

3、发生JavaScript错误时在window上面触发select当用户选择文本框（input或textarea）或一个字符串时触发resize当窗口或框架大小变化时在window上面触发scroll当用户滚动滚动条的元素中的内容时，在元素上触发JavaScript事件概述焦点事件焦点事件会在页面得到焦点或失去焦点时触发。鼠标点击可获得光标（即获得焦点），Tab键可按照设置的Tabindex进行切换焦点。6事件描述focus在得到焦点的元素上触发，这个事件不会冒泡focusIn在得到焦点的元素上触发 ，这个事件会冒泡DOMFocusIn在得到焦点的元素上触发，这个事件会冒泡DOMFocusOut

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

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

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

7、ickonClick当鼠标被单击时执行JS代码dblclickonDblclick当鼠标被双击时执行JS代码mousedownonMouseDown当鼠标按钮被按下时执行JS代码mousemoveonMouseMove当鼠标指针移动时执行JS代码JavaScript事件概述事件处理常见的事件句柄(续）10事件事件句柄说明mouseoutonMouseOut当鼠标移出某元素时执行JS代码mouseuponMouseUp当鼠标按钮被松开时执行JS代码keydownonKeyDown当键盘被按下时执行JS代码keypressonKeyPress当键盘被按下后又松开时执行JS代码keyuponKeyU

8、p当键盘被松开时执行JS代码loadonLoad当文档载入时执行JS代码unloadonUnload当文档卸载时执行JS代码JavaScript事件概述事件处理注册事件处理程序的方式有三种设置HTML标签属性为事件处理程序设置JavaScript对象属性为事件处理程序。使用addEventListener和attachEvent函数绑定11JavaScript事件概述事件处理设置HTML标签属性为事件处理程序语法为： onXXX=JavaScript Code“XXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移

9、出事件 onmouseout 等。JavaScript Code 为处理事件的JavaScript代码，一般是函数。12div1div2div3JavaScript事件概述事件处理设置JavaScript对象属性为事件处理程序。通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成13JavaScript事件概述事件处理设置JavaScript对象属性为事件处理程序。14 var div1 = document.getElementById(div1);/*获取id为div1元素的对象，是事件目标对象*/ var div2 = do

10、cument.getElementById(div2);/*获取id为div2元素的对象，是事件目标对象*/ var div3 = document.getElementById(div3);/*获取id为div3元素的对象，是事件目标对象*/div1.onclick = function()/*给div1对象的onclick属性赋值，其值为事件处理函数*/alert(div1);div2.onclick = function()/*给div2对象的onclick属性赋值，其值为事件处理函数*/alert(div2);div3.onclick = function()/*给div3对象的onc

11、lick属性赋值，其值为事件处理函数*/alert(div3);JavaScript事件概述事件处理使用addEventListener和attachEvent函数绑定任何能成为事件目标的对象都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。其中： bool参数可省略，默认为flase，当其为true时，就是在事件捕获过程中注册事件处理程序。15addEventListener(事件类型，事件处理函数,bool)JavaScript事件概述事件处理使用addEventListener和attachEvent函数绑定16/*获取id为div1

12、元素的对象，是事件目标对象*/ var div1 = document.getElementById(div1); /*调用div1对象的addEventListener函数 */div1.addEventListener(click, function() alert(div1-bubble); , false);div1.addEventListener(click, function() alert(div1-capturing); , true);JavaScript常用事件获得焦点（focus）和失去焦点（blur）事件17 姓名： 年龄：JavaScript常用事件鼠标移动和鼠标按

13、下事件18姓名：年龄：JavaScript常用事件UI事件UI事件中的load事件通常用于检测文档内容或者图片是否加载完毕。事件目标为window对象，通过给window对象的onload属性进行赋值，赋值为事件处理函数当文档加载完毕后，会触发window对象的onload事件，执行事件处理函数体里面代码19window.onload = function()/事件处理JavaScript常用事件表单事件submit事件通常监测是否提交表单元素，当提交表单元素时会触发，也就是form元素对象.onsumit事件。需要注意的是，动态表单提交（form.submit()）无法触发onsubmit事件。submit事件常用来进行表单数据验证。20账号：密码：JavaScript常用事件表单事件change事件作用域的内容被改变时触发，该事件是在内容改变时还必须使得当前元素失去焦点(onblur)才可以激活。change 事件会被HTML的、和 元素触发。21我是一名大学生字体：宋体黑体楷体本章总结JavaScript事件的概念和作用，包含事件、事件类型、事件目标、事件对象