21世紀(jì)高等學(xué)校計算機(jī)規(guī)劃教材第8章JavaScript事件處理模型

第8章

事件處理模型

事件是JavaScript和DOM之間進(jìn)行交互的橋梁，當(dāng)某個事件發(fā)生時，通過它的處理函數(shù)執(zhí)行相應(yīng)的JavaScript代碼。頁面加載完成時，會觸發(fā)load事件，用戶單擊按鈕時會觸發(fā)click事件。通過編寫這些事件的處理函數(shù)，可以實現(xiàn)對事件的響應(yīng)，如向用戶顯示提示信息、關(guān)閉窗口等。本章將要介紹的是DOM的事件處理模型，包括事件流機(jī)制、事件處理函數(shù)和事件對象，IE在事件處理方面采取不同于DOM的方式，因此本章也對IE中的事件處理模型進(jìn)行了單獨(dú)講解。最后，本章通過應(yīng)用例如說明如何在Web開發(fā)中使用事件處理模型解決實際的問題。事件流8.1事件處理函數(shù)8.2事件對象8.3事件處理應(yīng)用示例8.48.1事件流DOMLevel2中對事件流進(jìn)行了定義，但在DOM標(biāo)準(zhǔn)出現(xiàn)之前，瀏覽器已經(jīng)實現(xiàn)了對事件的支持。當(dāng)時的瀏覽器是IE4.0和NetscapeNavigator4.0，它們都實現(xiàn)了事件流的機(jī)制，但是它們在事件的處理順序上是不同的：IE4.0采用了事件冒泡的方式，即事件從最特定的事件目標(biāo)傳播到最不特定的事件目標(biāo)，而NetscapeNavigator4.0那么恰恰相反，采取了捕獲型的事件流機(jī)制。DOM標(biāo)準(zhǔn)那么吸取了兩者的優(yōu)點(diǎn)，采用了捕獲+冒泡的方式。本節(jié)將分別介紹DOM和IE的事件流模型。8.1.1DOM事件流模型在DOM兼容瀏覽器中，事件流分為3個階段：〔1〕捕獲階段：事件從Document節(jié)點(diǎn)自上而下向目標(biāo)節(jié)點(diǎn)傳播的階段；〔2〕目標(biāo)階段：真正的目標(biāo)節(jié)點(diǎn)正在處理事件的階段；〔3〕冒泡階段：事件從目標(biāo)節(jié)點(diǎn)自下而上向Document節(jié)點(diǎn)傳播的階段?！纠?-1】ex1.html〔HTML局部〕DOM事件模型最獨(dú)特的性質(zhì)是，文本節(jié)點(diǎn)也觸發(fā)事件〔在IE中不會〕，當(dāng)鼠標(biāo)單擊“單擊此文本〞文本時會觸發(fā)click事件，該事件的事件流如圖8-1所示。從圖中可以看到，事件的捕獲階段最先開始，從Document節(jié)點(diǎn)開始逐漸向下傳播，直到“單擊此文本〞文本節(jié)點(diǎn)，事件進(jìn)入目標(biāo)階段，在目標(biāo)階段結(jié)束之后，事件由“單擊此文本〞文本節(jié)點(diǎn)開始事件的冒泡階段，直到Document節(jié)點(diǎn)為止。另外，需要說明的是，有些事件是可以取消的，在整個事件流的任何位置通過調(diào)用事件的stopPropagation方法可以停止事件的傳播過程。圖8-1DOM事件流

8.1.2IE事件流模型IE的事件模型與DOM事件模型的最根本區(qū)別在于事件流的傳播方式。

DOM事件模型的事件流包括3個階段，即捕獲階段、目標(biāo)階段和冒泡階段，對于canBubble屬性為false的事件而言，包含捕獲階段和目標(biāo)階段，而IE中的事件流僅包含冒泡階段。圖8-2IE中的事件流8.2事件處理函數(shù)用于響應(yīng)某個事件而調(diào)用的函數(shù)稱為事件處理函數(shù)，事件處理函數(shù)既可以通過JavaScript進(jìn)行分配，也可以在HTML中指定。例如：varbtn=document.getElementById("btn");btn.onclick=function(){alert("你好");};也可以在HTML代碼中進(jìn)行聲明：<buttonid="btn"onclick="alert('你好')">按鈕</button>以上的方法在IE和DOM兼容瀏覽器中均可使用，但是這種傳統(tǒng)的方法不能為事件指定多個事件處理函數(shù)。DOM模型和IE都提供了相應(yīng)的方法為事件添加處理函數(shù)，這些方法可以為事件添加多個處理函數(shù)。由于DOM標(biāo)準(zhǔn)和IE在事件流機(jī)制上的區(qū)別，它們在事件處理函數(shù)方面也采用了不同的方式。8.2.1DOM事件處理函數(shù)DOM標(biāo)準(zhǔn)提供了以下相關(guān)接口：〔1〕EventTarget〔2〕EventListener1．添加事件處理函數(shù)根據(jù)EventTarget接口的定義，調(diào)用事件目標(biāo)元素的addEventListener方法即可為事件添加相應(yīng)的處理函數(shù)。以例8-1中的HTML頁面為例，通過JavaScript腳本可以為3個<div>元素添加click事件的處理函數(shù)。根據(jù)事件處理函數(shù)的輸出，我們可以看到事件的響應(yīng)過程，相關(guān)的腳本代碼如例8-2所示?！纠?-2】ex1.html〔JavaScript局部〕圖8-3添加事件處理函數(shù)

【例8-3】ex3.html〔JavaScript局部〕〔a〕〔b〕圖8-4useCapture參數(shù)的使用

2．刪除事件處理函數(shù)通過addEventListener方法添加的事件處理函數(shù)，必須使用removeEventListener方法才能刪除，而且要求參數(shù)與添加事件處理函數(shù)時addEventListener方法的參數(shù)完全一致〔包括useCapture參數(shù)〕，否那么將不能成功刪除事件處理函數(shù)。仍然以例8-1中的測試頁面為例，我們希望top和middle這兩個<div>元素對click事件僅響應(yīng)一次，再次單擊“單擊此文本〞時頁面不再輸出top和middle的相關(guān)信息。實現(xiàn)這個目標(biāo)的方法是在事件響應(yīng)函數(shù)的最后局部刪除事件處理函數(shù)。修改后的handleTop和handleMiddle函數(shù)如例8-4所示。【例8-4】ex4.html〔JavaScript局部〕3．手動指派事件手動指派事件是指在事件并沒有實際發(fā)生的情況下觸發(fā)該事件，模擬事件發(fā)生的效果。

DOM標(biāo)準(zhǔn)中EventTarget接口的dispatchEvent方法可以允許用戶手動指派事件，實現(xiàn)模擬事件的效果。在DOM中手動指派事件的步驟如下：〔1〕調(diào)用DocumentEvent接口的createEvent方法創(chuàng)立事件對象；〔2〕調(diào)用事件對象的initEvent〔或者子接口的初始化事件方法〕；〔3〕調(diào)用EventTarget接口的dispatchEvent方法觸發(fā)事件。8.2.2IE事件處理函數(shù)IE的事件流模型只存在冒泡階段，因此在添加/刪除事件處理函數(shù)時不需要指定事件在哪個階段觸發(fā)，手動指派事件的方式也與DOM存在區(qū)別。1．添加/刪除事件處理函數(shù)在IE中使用attachEvent和detachEvent方法添加/刪除事件處理函數(shù)

在DOM事件模型中addEventListener/removeEventListener方法在調(diào)用時需要傳入3個參數(shù)，其中第3個參數(shù)useCapture指明了事件處理函數(shù)是否在捕獲階段觸發(fā)。在IE的事件模型中只有冒泡階段，因此attachEvent/detachEvent只有兩個參數(shù)：〔1〕sEvent：事件類型字符串，如“onclick〞〔在DOM中使用“click〞作為事件類型字符串〕；〔2〕fpNotify：事件處理函數(shù)。IE和DOM在添加事件處理函數(shù)時的另一個區(qū)別是：attachEvent方法將返回一個布爾值，提示添加事件處理函數(shù)的操作是否成功，而DOM事件模型中addEventListener方法無返回值。2．手動指派事件在IE中手動指派事件需要完成和DOM中類似的工作，但實現(xiàn)方式不同，具體步驟如下?！?〕創(chuàng)立和初始化事件對象〔2〕觸發(fā)事件〔a〕單擊內(nèi)部div元素〔b〕單擊外部div元素圖8-5IE手動指派事件測試

8.3事件對象在進(jìn)行事件處理時，獲取事件信息是很重要的。因此，DOM標(biāo)準(zhǔn)和IE中都提供了事件對象，其中包含的事件信息有：〔1〕引發(fā)事件的對象；〔2〕事件發(fā)生時鼠標(biāo)的信息；〔3〕事件發(fā)生時鍵盤的信息。事件對象只有在事件發(fā)生時才被創(chuàng)立，只有事件處理函數(shù)才能訪問，在事件處理完畢之后，事件對象即被銷毀。當(dāng)然，DOM和IE采用了不同方式實現(xiàn)事件對象。8.3.1DOM事件對象DOM標(biāo)準(zhǔn)的事件對象是Event接口，UIEvent、MouseEvent等接口直接或者間接繼承自它，分別用于處理不同類型的事件。鍵盤事件比較特殊，在DOMLevel3中才完整地標(biāo)準(zhǔn)化，而目前還沒有瀏覽器支持DOMLevel3，目前最接近DOM標(biāo)準(zhǔn)的實現(xiàn)是MozillaFilefox，本節(jié)將對MozillaFilefox中的鍵盤事件進(jìn)行介紹。1．Event接口DOM標(biāo)準(zhǔn)對事件對象的獲取進(jìn)行了限定，事件對象必須作為唯一的參數(shù)傳給事件處理函數(shù)。事件對象中包含了DOM事件發(fā)生時相關(guān)的上下文信息，它實現(xiàn)的DOM標(biāo)準(zhǔn)接口是Event

2．DocumentEvent接口DocumentEvent接口提供了一種由用戶創(chuàng)立事件的機(jī)制，該接口只定義了一個方法createEvent，其作用是創(chuàng)立一個指定類型的事件對象表8-1 事件接口類型事件接口類型eventType參數(shù)值對應(yīng)子接口支持的事件類型（type）用戶界面事件UIEventsUIEventDOMActivate,DOMFocusIn,DOMFocusOut鼠標(biāo)事件MouseEventsMouseEventclick,mousedown,mousemove,mouseout,mouseover,mouseup變化事件MutationEventsMutationEventDOMSubtreeModified,DOMNodeInserted,DOMNodeRemoved,DOMNodeRemovedFromDocument,DOMNodeInsertedIntoDocument,DOMAttrModified,DOMCharacterDataModifiedHTML事件HTMLEventsEventabort,blur,change,error,focus,load,reset,resize,scroll,select,submit,unload3．用戶界面事件用戶界面事件指的是DOM元素激活、獲得焦點(diǎn)和失去焦點(diǎn)時觸發(fā)的事件，它對應(yīng)的接口是UIEvent，它是Event的子接口

用戶界面事件支持以下事件類型?！?〕DOMActivate〔2〕DOMFocusIn〔3〕DOMFocusOut4．鼠標(biāo)事件用戶界面事件通常很少直接使用，UIEvent接口更重要的作用是作為鼠標(biāo)事件MouseEvent接口的父接口。鼠標(biāo)事件指的是由鼠標(biāo)的點(diǎn)擊、移動等操作引發(fā)的事件，常用的事件包括click，mousedown，mouseover等。

圖8-6鼠標(biāo)事件的relateTarget屬性

【例8-6】ex6.html

圖8-7relateTarget屬性測試頁面

表8-2 鼠標(biāo)事件事

件

類

型BCB&DROthersclick√√√×√mousedown√√√×√mouseup√√√×√mouseover√√√√√mousemove√×√×√mouseout√√√√√5．鍵盤事件DOMLevel3提供了完整的鍵盤事件定義，但是到目前為止在主流瀏覽器中還沒有相應(yīng)地實現(xiàn)。盡管如此，大多數(shù)瀏覽器都支持用戶對鍵盤事件編程，它們的實現(xiàn)方式與DOM標(biāo)準(zhǔn)存在著一些差異。本節(jié)將討論MozillaFirefox中的鍵盤事件，這也是與DOM標(biāo)準(zhǔn)最接近的一種實現(xiàn)。鍵盤事件包括以下3類：〔1〕keydown〔2〕keypress〔3〕keyup【例8-7】ex7.html

三個事件的處理函數(shù)內(nèi)容完全相同，這樣做的目的主要是為了方便單獨(dú)在某個事件的處理函數(shù)中設(shè)置斷點(diǎn)。圖8-8使用Firebug觀察事件屬性

表8-3 鍵盤事件按

鍵keydown事件keypress事件keyup事件a65，0，650，97，9765，0，65A65，0，650，65，6565，0，65z90，0，900，122，12290，0，90Z90，0，900，90，9090，0，90Shift16，0，16×16，0，16Ctrl17，0，17×17，0，17Alt18，0，18×18，0，18Home36，0，3636，0，036，0，36End35，0，3535，0，035，0，35PageUp33，0，33×33，0，33PageDown34，0，34×34，0，34←37，0，37×37，0，37↑38，0，38×38，0，38→39，0，39×39，0，39↓40，0，40×40，0，40F1112，0，112112，0，0112，0，112F12123，0，123123，0，0123，0，123Esc27，0，2727，0，027，0，27Capslock20，0，20×20，0，20Numlock144，0，144×144，0，144Ins45，0，4545，0，045，0，45Del46，0，4646，0，046，0，46按

鍵keydown事件keypress事件keyup事件Backspace8，0，88，0，88，0，8Enter13，0，1313，0，1313，0，13Tab9，0，99，0，09，0，96．HTML事件HTML事件是指由HTML頁面中的元素觸發(fā)的事件，它在DOM標(biāo)準(zhǔn)中對應(yīng)的接口是Event。表8-4列舉了HTML事件支持的事件類型，其中B列表示事件是否為冒泡事件，C列表示事件是否可取消。表8-4 HTML事件事

件

類

型BC支持該事件的HTML元素load××<body>,<frameset>,<iframe>,<img>,<object>unload××<body>,<frameset>abort√×<img>,<object>error√×<body>,<frameset>,<img>,<object>select√×<input>,<textarea>change√×<input>,<select>,<textarea>submit√√<form>reset√×<form>focus××<a>,<area>,<button>,<input>,<label>,<select>,<textarea>blur××<a>,<area>,<button>,<input>,<label>,<select>,<textarea>resize√×<body>,<frameset>,<iframe>scroll√×<body>8.3.2IE事件對象IE的事件對象是window對象的一個屬性，這是IE的事件對象與DOM事件對象的最大區(qū)別。在IE中可以使用window.event或者event獲取當(dāng)前的事件對象，而在DOM中是通過事件處理函數(shù)的參數(shù)進(jìn)行傳遞的。

1．獲取觸發(fā)事件的對象2．事件流處理3．事件定位4．其他8.4事件處理應(yīng)用例如8.4.1商品評級功能〔a〕〔b〕圖8-9傳統(tǒng)商品評級功能