摘要：那該如何是好原題給出思路是讓事件負責標記按鍵就好了，而方向鍵的事件處理使用設個周期比較小的定時器持續監聽，由于周期小，長按時就會立刻執行相應的事件處理，效果更加流暢。閃爍實現效果閃爍簡單的一個定時器應用，用或都可以實現。

實現效果：
5-01模擬select控件

比較簡單的點擊事件處理，也就處理點擊選擇框展示菜單、點擊菜單選擇、點擊頁面任意角落隱藏菜單這三件事。這里注意點擊選擇框展示菜單時一定要阻止冒泡，要不然會冒到頂層元素直接觸發隱藏菜單的事件，導致菜單點不出來。

至于樣式方面，還是用背景圖的方式來實現一個擬物化的效果，這種做法雖然兼容性好，但是需要固定元素的寬高位置、使用固定的背景偏移來“湊出”一個效果。

當然這些固定也不一定是絕對的，遇上背景圖不夠大簡單的方法就是設置repeat；遇上復雜背景還可以靠增加元素層級、逐層放一個背景片段、最后再組合起來的方式來實現（這里就得設置背景no-repeat了）。比如這里圓角搜索框的實現就是祖父一個圓角、父元素再一個圓角、最后子元素放上主體背景做出來的。然而這種事后的補救和折中總給人繁瑣而且不夠優雅的感覺，多少也是和設計溝通不到位的結果吧-_-||...

實現效果：
5-02點擊頁面，顯示單擊的坐標

熟悉一下鼠標事件而已，除了獲取視口坐標、頁面坐標、屏幕坐標，這里還順便實踐了下鼠標事件的4個按鍵屬性（其中按meta鍵時會喚出開始菜單，所以無效了）和button屬性。由于click事件和鼠標右鍵無關，無法用button屬性判斷是否點了右鍵，所以這里改用mouseup事件代替；同時也把簡單的第四題一并做了，阻止了點右鍵后冒出右鍵菜單。

實現效果：
5-03用戶按下鍵盤，顯示keyCode

再熟悉下鍵盤事件，為充分體驗到每個按鍵的效果，防止f5刷新等，這里還阻止了默認事件。

至于獲取輸入的內容，要注意keyCode（針對keydown/keyup）、charCode（針對keypress）屬性只能獲取非字符、小寫字母和數字的ascii碼，而且即使你按了shift鍵也不能獲取大寫字母和其他字符。

所以要獲取輸入的是哪個字符應該使用key（FF和IE，返回按鍵文本字符）或keyIdentifier（webkit，返回形如’U+unicode碼’的字符串），通過這個練習能體會到他們的不同。

實現效果：
5-05跟隨鼠標移動（大圖展示）

繼續鼠標事件，核心思路就是監聽mouseover、mouseout、mousemove三個事件分別實現大圖的展示、隱藏、移動，還是通過三個事件代理就可輕松實現。

具體實現上，主要考察通過Image對象來加載大圖，首先，這樣做就使大圖在變成在后期加載，免去了加載頁面主體時被幾個大圖阻塞的問題；第二，還能通過Image對象的complete屬性和load事件來判斷是否加載完，根據加載進度進行相應的操作，以提高用戶體驗。同時在大圖展示上，如果右側顯示區域不夠, 還要對大圖顯示位置做相應調整，這就涉及到一點小計算了。

實現效果：
5-06自定義右鍵菜單

思路其實很簡單，阻止默認的contextmenu事件換成顯示自定義菜單，在加個點擊事件實現隱藏菜單即可。但在交互細節上還有一些可優化的點：

首先，要出現自定義菜單的地方未必是整個頁面，若是只在某一區域內出現，那么菜單定位就要相對這個區域才行，而clientX和clientY都是相對整個屏幕而言的，這時就需要我們重置下坐標系了。

第二，和上面一題一樣，點右鍵后右邊和下邊的空間未必能容得下整個菜單，所以還要根據剩余空間來決定菜單出現的位置，防止菜單出界導致樣式失調。

實現效果：
5-07用鍵盤控制Div

原本以為只是個簡單的鍵盤事件練習，沒想到遇到的坑還是挺多的，因為瀏覽器的鍵盤事件是不支持組合按鍵的，只能一次觸發一個按鍵上的事件。而這題明顯就要求使用組合鍵了，一個簡單的思路就是給要用到的組合按鍵分配一個對應的布爾值，按下一個按鍵觸發keydown就標記該按鍵為true，而松開按鍵觸發keyup時則標記為false，這樣后續的其他按鍵事件觸發時就能獲知按鍵的組合了。

對于ctrl和其他鍵組合，可以直接使用上面提到的思路，即先標記ctrl，按下其他按鍵時就可判斷是否同時按住ctrl，執行相應的動作即可。

而在使用方向鍵時，除了組合的需求，還要實現長按按鍵使方塊連續運動的效果。但長按時keydown的觸發卻是在觸發一次后，等一段時間再連續觸發，如果只在keydown事件的處理函數中對方塊的運動做處理，就會使得方塊的運動效果顯得卡頓而不流暢。

那該如何是好？原題給出思路是：讓keydown事件負責標記按鍵就好了，而方向鍵的事件處理使用setInterval設個周期比較小的定時器持續監聽，由于周期小，長按時就會立刻執行相應的事件處理，效果更加流暢。

除了效果的流暢，還要注意阻止默認事件，畢竟ctrl和方向鍵都是瀏覽器常用的功能鍵。同時和前面的題目一樣，也必須限制效果的生成范圍，不能讓小方塊跑到沒邊的地方去了。

實現效果：
5-08 Div閃爍

簡單的一個定時器應用，用setInterval或setTimeout都可以實現。

當然，我還是比較喜歡用setTimeout，因為setInterval完全可以用setTimeout的遞歸調用來模擬，而且還有以下幾個原因：

首先，鏈式調用setTimeout可以嚴格保證執行順序，而setInterval就不那么讓人省心了，詳見前端碎語（3）

而且setInterval一開始還要等時間間隔跑完才調用回調函數，若是使用setTimeout就可以直接調用遞歸函數立即開始；

最后，setTimeout的遞歸函數要中止只需破壞遞歸條件即可，不用再使用clearTimeout，還能省去定義一個定時器變量~

--- 第五課完 ---