HTML課件ppt版 web-ajs進階2事件模型

JavaScript進階2

事件處理模型信息學院2012楊占勝事件處理概述

事件處理是圖形用戶界面中用戶交互功能的基本實現(xiàn)機制。事件源與事件類型

事件監(jiān)聽器

事件對象基本事件模型

事件處理函數(shù)的綁定

元素的事件屬性DOM對象的事件屬性

事件對象的傳遞

取消默認行為

代碼中觸發(fā)事件IE事件模型

事件處理函數(shù)的綁定scriptfor屬性attachEvent()

detachEvent()

事件對象：隱式全局對象event

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

改變默認行為：event.returnValue=false

事件重定向：fireEvent()

捕獲鼠標事件：setCapture()releaseCapture()DOM2事件模型

事件處理函數(shù)的綁定：addEventListener() removeEventListerner()

事件對象及其傳遞：arguments[0]EventUIEventMouseEvent

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

取消默認行為：event.preventDefault()

事件轉發(fā)：用戶自定義事件dispatchEvent()DOM2事件處理機制DOM的事件傳播包含三個階段:捕捉階段（capturing），事件從頂級文檔樹節(jié)點一級一級向下遍歷，直到到達該事件的目標節(jié)點。目標節(jié)點階段（target），執(zhí)行目標節(jié)點注冊的處理程序。事件起泡（bubbling），事件從目標節(jié)點一級一級向上上溯，直到頂級文檔樹節(jié)點。事件處理程序的注冊與刪除addEventListener(eventType,handler,propagate);removeEventListener(eventType,handler,propagate);參數(shù)意義：eventType:即事件類型（不加on）。handler:事件處理函數(shù)。傳入?yún)?shù)即為事件對象event。propagate:是否啟用狀態(tài)。事件處理程序與事件對象ModulenameEventinterfaceEventtypesHTMLEventsEventabort,blur,change,error,focus,load,reset,resize,scroll,select,submit,unloadMouseEventsMouseEventclick,mousedown,mousemove,mouseout,mouseover,mouseupUIEventsUIEventDOMActivate,DOMFocusIn,DOMFocusOutFunctionhandlename(evt);Event的屬性屬性名意義type事件類型target事件發(fā)生的節(jié)點currentTarget正在處理事件的節(jié)點eventPhase事件傳播階段:Event.CAPTURING_PHASE,Event.AT_TARGET,Event.BUBBLING_PHASE.timeStamp事件發(fā)生的時間bubbles事件是否沿文檔樹向上冒泡cancelable事件是否可以阻止與其相關聯(lián)的默認行為MouseEvent的屬性屬性名意義button改變了狀態(tài)的鍵：0左鍵,1中鍵,2右鍵altKey,ctrlKey,metaKey,shiftKey控制鍵是否被按下clientX,clientY相對于瀏覽器窗口的客戶區(qū)的坐標sc