HTML课件ppt版 web-ajs进阶2事件模型

JavaScript进阶2

事件处理模型信息学院2012杨占胜事件处理概述

事件处理是图形用户界面中用户交互功能的基本实现机制。事件源与事件类型

事件监听器

事件对象基本事件模型

事件处理函数的绑定

元素的事件属性DOM对象的事件属性

事件对象的传递

取消默认行为

代码中触发事件IE事件模型

事件处理函数的绑定scriptfor属性attachEvent()

detachEvent()

事件对象：隐式全局对象event

事件传播阻止冒泡：event.cancelBubble=true

改变默认行为：event.returnValue=false

事件重定向：fireEvent()

捕获鼠标事件：setCapture()releaseCapture()DOM2事件模型

事件处理函数的绑定：addEventListener() removeEventListerner()

事件对象及其传递：arguments[0]EventUIEventMouseEvent

事件传播阻止传播：event.stopPropagation()

取消默认行为：event.preventDefault()

事件转发：用户自定义事件dispatchEvent()DOM2事件处理机制DOM的事件传播包含三个阶段:捕捉阶段（capturing），事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。目标节点阶段（target），执行目标节点注册的处理程序。事件起泡（bubbling），事件从目标节点一级一级向上上溯，直到顶级文档树节点。事件处理程序的注册与删除addEventListener(eventType,handler,propagate);removeEventListener(eventType,handler,propagate);参数意义：eventType:即事件类型（不加on）。handler:事件处理函数。传入参数即为事件对象event。propagate:是否启用状态。事件处理程序与事件对象ModulenameEventinterfaceEventtypesHTMLEventsEventabort,blur,change,error,focus,load,reset,resize,scroll,select,submit,unloadMouseEventsMouseEventclick,mousedown,mousemove,mouseout,mouseover,mouseupUIEventsUIEventDOMActivate,DOMFocusIn,DOMFocusOutFunctionhandlename(evt);Event的属性属性名意义type事件类型target事件发生的节点currentTarget正在处理事件的节点eventPhase事件传播阶段:Event.CAPTURING_PHASE,Event.AT_TARGET,Event.BUBBLING_PHASE.timeStamp事件发生的时间bubbles事件是否沿文档树向上冒泡cancelable事件是否可以阻止与其相关联的默认行为MouseEvent的属性属性名意义button改变了状态的键：0左键,1中键,2右键altKey,ctrlKey,metaKey,shiftKey控制键是否被按下clientX,clientY相对于浏览器窗口的客户区的坐标sc