原生js練習題---第五課

0x1模擬select控件

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

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

至於樣式方面，仍是用背景圖的方式來實現一個擬物化的效果，這種作法雖然兼容性好，可是須要固定元素的寬高位置、使用固定的背景偏移來「湊出」一個效果。

固然這些固定也不必定是絕對的，趕上背景圖不夠大簡單的方法就是設置repeat；趕上覆雜背景還能夠靠增長元素層級、逐層放一個背景片斷、最後再組合起來的方式來實現（這裏就得設置背景no-repeat了）。好比這裏圓角搜索框的實現就是祖父一個圓角、父元素再一個圓角、最後子元素放上主體背景作出來的。然而這種過後的補救和折中總給人繁瑣並且不夠優雅的感受，多少也是和設計溝通不到位的結果吧-_-||...

0x2點擊頁面，顯示單擊的座標、0x4阻止右鍵菜單（阻止默認事件）

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

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

0x3用戶按下鍵盤，顯示keyCode

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

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

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

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

0x5跟隨鼠標移動（大圖展現）

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

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

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

0x6自定義右鍵菜單

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

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

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

• 第二，和上面一題同樣，點右鍵後右邊和下邊的空間未必能容得下整個菜單，因此還要根據剩餘空間來決定菜單出現的位置，防止菜單出界致使樣式失調。

0x7用鍵盤控制Div

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

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

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

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

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

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

0x8 Div閃爍

實現效果：
5-08 Div閃爍

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

固然，我仍是比較喜歡用setTimeout，由於setInterval徹底能夠用setTimeout的遞歸調用來模擬，並且還有如下幾個緣由：

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

• 並且setInterval一開始還要等時間間隔跑完才調用回調函數，如果使用setTimeout就能夠直接調用遞歸函數當即開始；

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

--- 第五課完 ---