下面來分析一下如何實(shí)現(xiàn)上面的功能。先列出需要用到的知識(shí)點(diǎn)。首先，鼠標(biāo)進(jìn)入div觸發(fā)的事件有mouseover、mouseenter事件（見7.2節(jié)），可以選擇處理這兩個(gè)事件改變div的背景和邊框。只需要處理其中一個(gè)事件即可。其次，鼠標(biāo)移動(dòng)時(shí)觸發(fā)mousemove事件（見7.2節(jié)），可以處理目標(biāo)div的這個(gè)事件輸出鼠標(biāo)指針位置和事件發(fā)生時(shí)間。第三，鼠標(biāo)離開時(shí)觸發(fā)mouseout、mouseleave事件（見7.2節(jié)），可以選擇處理這兩個(gè)事件，顯示鼠標(biāo)離開時(shí)指針的坐標(biāo)和事件發(fā)生的時(shí)間。只需要處理其中一個(gè)事件即可。第四，修改元素div的背景和邊框需要用到控制元素樣式的知識(shí)（見6.6.3節(jié)）。第五，顯示鼠標(biāo)指針位置X坐標(biāo)和Y坐標(biāo)，以及事件發(fā)生的時(shí)間需要用到MouseEvent事件對(duì)象（見7.3.2節(jié)），其中clientX和clientY表示事件發(fā)生時(shí)鼠標(biāo)的位置（X和Y坐標(biāo)），timeStamp屬性表示事件發(fā)生的時(shí)間，以一個(gè)長整型的整數(shù)表示，需要轉(zhuǎn)換成我們熟知的時(shí)間格式。第六，要處理事件，必須注冊(cè)事件處理函數(shù)。注冊(cè)事件處理函數(shù)的關(guān)鍵是兼容兩種事件處理模型（見7.5.1節(jié)）。第七，要用到事件對(duì)象，最關(guān)鍵也是兼容兩種事件模型（見7.5.1節(jié)）。上面七點(diǎn)是我們實(shí)現(xiàn)這一功能所用到的知識(shí)點(diǎn)，這里并沒有列出所有需要的知識(shí)點(diǎn)，如變量聲明、控制結(jié)構(gòu)，函數(shù)聲明等等。下面來看一下，這些功能是如何實(shí)現(xiàn)的。通過對(duì)實(shí)例功能的分析，需要實(shí)現(xiàn)以下功能：◆設(shè)置/添加div的黃色背景；

◆設(shè)置/添加紅色粗線邊框；

◆顯示事件發(fā)生的時(shí)間以及鼠標(biāo)指針的位置。

◆取消/刪除div的黃色背景；

◆取消/刪除div的紅色粗線邊框。先來看一下添加div黃色背景的實(shí)現(xiàn)。要對(duì)div添加背景，首先要獲得要添加背景的這個(gè)div。鼠標(biāo)要進(jìn)入或者離開這個(gè)div，那它就可以看作是事件源。通過事件對(duì)象的target屬性（IE事件對(duì)象中為srcElement屬性）就可以獲得事件發(fā)生的事件源，也就是要設(shè)置背景的div。根據(jù)清單7-3，獲取事件對(duì)象和事件源的兼容性方法如下：//獲取事件對(duì)象evt varevt=eventObj||window.event; //獲取對(duì)象的事件源 varelem=evt.srcElement||evt.target;獲取到事件源，也就是要設(shè)置背景的元素對(duì)象之后，就是要為它設(shè)置CSS樣式，設(shè)置CSS樣式的方法很多（見6.6.3節(jié)），這里采用最為簡(jiǎn)單的設(shè)置style的backgroundColor屬性來實(shí)現(xiàn)，代碼如下：elem.style.backgroundColor="yellow";也可以使用設(shè)置style的cssText來實(shí)現(xiàn)，代碼如下：elem.style.cssText="background-color:yellow;";最后就是顯示鼠標(biāo)的坐標(biāo)位置和事件發(fā)生的時(shí)間，讀取事件對(duì)象的clientX，clientY和timeStamp屬性并構(gòu)造成"X="+evt.clientX+",Y="+evt.clientY+",<br/>"+"時(shí)間戳="+(newDate(evt.timeStamp))這種格式的字符串，賦給事件源元素的innerHTML屬性即可，代碼如下：msg.innerHTML="X="+evt.clientX +",Y="+evt.clientY+",<br/>" +"時(shí)間戳="+(newDate(evt.timeStamp));其中msg為顯示信息div對(duì)應(yīng)的變量，也就是div的元素對(duì)象。設(shè)置背景的完整代碼如下所示。functionsetBg(eventObj){ varevt=eventObj||window.event; varelem=evt.srcElement||evt.target; elem.style.backgroundColor="yellow"; msg.innerHTML="X="+evt.clientX +",Y="+evt.clientY+",<br/>" +"時(shí)間戳="+(newDate(evt.timeStamp));}其他3個(gè)功能——設(shè)置邊框、取消背景和取消邊框——與此類似，不再分析其實(shí)現(xiàn)過程，也不再單獨(dú)列出其源代碼。實(shí)例的完整代碼如清單7-6所示。這里省略了設(shè)置兩個(gè)divCSS樣式的代碼，詳細(xì)代碼見隨書源代碼的Listing7-4.html文件中，它位置于第7章文件夾中。運(yùn)行效果如圖7-2所示圖7-2鼠標(biāo)事件實(shí)例運(yùn)行效果注意這個(gè)實(shí)例代碼并沒有按習(xí)慣上的JavaScript代碼在前，HTML標(biāo)記在后的寫法，而是先寫出了HTML標(biāo)記，然后才是JavaScript代碼。這樣做的原因是：瀏覽器引擎在解析網(wǎng)頁中的標(biāo)記（包括sript標(biāo)記）是按其中文檔中出現(xiàn)的順序進(jìn)行的。所以如果先編寫JavaScript代碼，則瀏覽器先遇到JS代碼并解釋執(zhí)行它，而此時(shí)還沒有解析到HTML代碼，所以JS中引用網(wǎng)頁元素（HTML標(biāo)記）的代碼就會(huì)出現(xiàn)錯(cuò)誤。所以這里先寫出HTML代碼再編寫JavaScript代碼。7.5.4鍵盤事件處理下面再給出一個(gè)鍵盤事件的例子。該實(shí)例是一個(gè)簡(jiǎn)化版本的鍵盤打字游戲，只實(shí)現(xiàn)了最基本的打字和顯示打字結(jié)果的功能。大家可以在它的基礎(chǔ)上，進(jìn)行豐富完成一個(gè)自己的打字練習(xí)游戲。鍵盤打字游戲功能功能是用戶敲擊鍵盤，程序可以識(shí)別用戶按下的鍵，并讀取其鍵值再轉(zhuǎn)換成Unicode字符并顯示在輸出區(qū)。同時(shí)對(duì)應(yīng)虛擬鍵盤上的對(duì)應(yīng)字母出現(xiàn)黃色背景并字體變小的動(dòng)畫效果，按下下一鍵時(shí)上一次按下鍵的動(dòng)畫消失，再次按下的鍵出現(xiàn)動(dòng)畫效果。并且還能支持Shift輸入大寫字母。為了簡(jiǎn)單其見，沒有使用圖形作為虛擬鍵盤，而是使用HTML表格作為虛擬鍵盤。虛擬鍵盤的HTML代碼如下：<tableid="keyboard"> <tr> <td>Q</td><td>W</td><td>E</td><td>R</td><td>T</td> <td>Y</td><td>U</td><td>I</td><td>O</td><td>P</td> </tr><tr> <td>A</td><td>S</td><td>D</td><td>F</td><td>G</td> <td>H</td><td>J</td><td>K</td><td>L</td><td>;</td> </tr> <tr> <td>Z</td><td>X</td><td>C</td><td>V</td><td>B</td> <td>N</td><td>M</td><td>,</td><td>.</td><td>/</td></tr><tr> <tdcolspan="2">©</td> <tdcolspan="6"></td> <tdcolspan="2">©</td> </tr></table>實(shí)現(xiàn)打字游戲可以響應(yīng)keypress事件，讀取KeyboardEvent對(duì)象的charCode屬性獲取按下鍵的Unicode碼，并使用String.fromCharCode()函數(shù)將獲取的Unicode碼轉(zhuǎn)換成對(duì)應(yīng)的字符。然后把識(shí)別出的字符保存到一個(gè)數(shù)組中，并把數(shù)組的內(nèi)容顯示在輸出區(qū)就可以了。這里的問題是，表格的單元格無法觸發(fā)keypress事件，因?yàn)椴豢赡軐⒛硞€(gè)單元格獲取焦點(diǎn)，再按下鍵盤上的鍵。因?yàn)槭录鞑ビ幸粋€(gè)冒泡階段，可以在單元格的父元素中處理keypress事件，這里選擇body作為處理keypress事件的元素。把事件處理器keyboardGame()注冊(cè)給body元素，代碼如下：addEvent(document.body,'keypress',keyboardGame);addEvent()函數(shù)的定義如清單7-1（見7.5.1節(jié)）所示。事件處理函數(shù)keyboardGame()定義如清單7-7所示。首先對(duì)使用的變量加以說明，用到的變量如下所示。varstr=newArray();varCOLS=60;varcount=0;vartarget=null;變量str是一個(gè)數(shù)組，用于存放所有輸入的字符。因?yàn)橐娣泡斎氲乃凶址员仨毬暶鳛槿肿兞?，而不能作為事件處理函?shù)的局部變量，否則只能存放一個(gè)字符了。COLS符號(hào)常量表示輸出區(qū)域最多一行存放60個(gè)字符。變量count用于統(tǒng)計(jì)已輸入的字符個(gè)數(shù)，與COLS變量一起實(shí)現(xiàn)一行存放60個(gè)字符。變量target用于保存與輸入字符相匹配的表格中的單元格，用于恢復(fù)它原來的樣式。第二是獲取事件對(duì)象，并通過事件對(duì)象的charCode屬性獲得按下鍵對(duì)應(yīng)字符的Unicode代碼，并通過String.fromCharCode()把Unicode代碼轉(zhuǎn)換成對(duì)應(yīng)的字符。對(duì)應(yīng)的代碼如下：//以兼容的方式獲得事件對(duì)象varevt=window.event||e;//讀取按下鍵的值，并轉(zhuǎn)換成對(duì)應(yīng)的Unicode字符。varkey=String.fromCharCode(evt.charCode);第三是處理按鍵的同時(shí)按下Shift的情況。如果按鍵的同時(shí)按下了Shift鍵，則把輸入的字符轉(zhuǎn)換為大寫字母。代碼如下：//把按下鍵對(duì)應(yīng)的字符轉(zhuǎn)換成大寫varcapKey=key.toUpperCase();//檢查是否按下Shift鍵，若按下則輸出大寫字母if(evt.shiftKey){ key=capKey;}第四是把已經(jīng)輸入的字符顯示在輸出區(qū)域（div）中。這一功能需要分為以下3個(gè)步驟：（1）先把輸入的字符添加在數(shù)組str的末尾；（2）然后將計(jì)數(shù)器count加1，如果count是60（COLS=60）的倍數(shù)，則在數(shù)組str的末尾添加一個(gè)回車標(biāo)記<br/>。（3）通過getElementById()獲得id為con的div，調(diào)用數(shù)組的join()方法，把數(shù)組元素（已經(jīng)輸入的所有字符）拼接成以空字符連接的字符串，并賦給獲取的div的innerHTML屬性，顯示在輸出div中。代碼如下：//（1）把輸入的字符添加在已輸入字符串的最后str.push(key);//（2）輸入字符計(jì)數(shù)count++;//每輸入60個(gè)字符，換一行if(count%COLS==0){ str.push("<br/>");}//（3）把輸入的字符串顯示在div中varcon=document.getElementById('con');con.innerHTML=str.join("");第五步是制作按下鍵的動(dòng)畫效果。由于表格的單元格無法觸發(fā)keypress事件，所以也就無法通過KeyboardEvent對(duì)象的target（或者IE的srcElement）來獲得字符對(duì)應(yīng)的單元格。所以，只能采用遍歷所有單元格，檢查哪個(gè)單元格的內(nèi)容與輸入的字符匹配的方法來確定按下的鍵對(duì)應(yīng)哪個(gè)單元格，然后對(duì)這個(gè)單元格修改CSS樣式，產(chǎn)生動(dòng)畫效果。要實(shí)現(xiàn)這一策略，要經(jīng)過以下兩步：（1）通過getElementsByTagName()函數(shù)獲得網(wǎng)頁中所有的td；（2）遍歷所有的td并對(duì)每個(gè)td執(zhí)行以下操作：a)通過td的firstChild.nodeValue獲取td單元格的內(nèi)容；b)檢查單元格的內(nèi)容是否與輸入的字符（已經(jīng)轉(zhuǎn)換為大寫字母）相匹配，如果匹配，則稱該td為目標(biāo)單元格，則修改該td的樣式——添加黃色背景和更改字體，并把該td存放在target變量中，以備恢復(fù)它的樣式。否則什么也不做。詳細(xì)代碼如下：//獲取網(wǎng)頁中所有的TD標(biāo)記對(duì)應(yīng)的結(jié)點(diǎn)vartds=document.getElementsByTagName('td');//遍歷所有TD，查找其內(nèi)容與按下鍵相等的TDfor(vari=0;i<tds.length;i++){ varkeyChar=tds[i].firstChild.nodeValue; if(keyChar.toUpperCase()==capKey){ tds[i].style.cssText= "font-size:24px;background:yellow;"; target=tds[i];}}第六步是恢復(fù)目標(biāo)單元格的樣式，配合第五步實(shí)現(xiàn)動(dòng)畫效果?；謴?fù)單元格樣式的時(shí)機(jī)是在上一次事件發(fā)生之后，本次事件發(fā)生的時(shí)候。因?yàn)槟繕?biāo)單元格已經(jīng)保存在了target變量中，所以如果target不為空（如果為空，說明本次事件為首次事件），則把它的C