原生js練習題---第二課（下）

時間 2019-12-08

原文原文鏈接

0x1播放列表收縮展開

值得注意的一個地方是那個箭頭，我這裏只是用了簡單的字符串替換，而原題用了背景圖片移動來實現切換箭頭，可是彷佛那樣作會致使整個容器的左右偏移、效果不是很好。dom

0x2鼠標移過顯示車標

這題看起來和前面那道改變車標透明度的題差很少，可是卻花了我很多時間。緣由仍是沒有深刻理解mouseover和mouseout事件的特色，雖然這兩個事件移進子元素也會觸發的特色便於實現事件代理，可是這樣一來若是單純在父元素上掛這兩個事件就想在子元素上實現出現和消失的效果，就會致使連續觸發---子元素出現觸發父元素mouseout致使消失、再觸發父元素mouseover，而後子元素又出現了，就這樣閃個不停。。。性能

因此這題和前面那道題最大的不一樣就在此，由於要實現的是子元素的出現和消失，因爲上述緣由的掣肘、也由於子元素自己就比父元素要大，故應該採用監聽li元素的mouseover使車標彈出，監聽子元素的mouseout使其消失。動畫

然而新問題又出現了，一開始我彈出的車標是個連接嵌套圖片，而我只是監聽連接的mouseout觸發車標的消失。但這就致使一個詭異的狀況，子元素彈出時鼠標就直接覆蓋在圖片上了，並不會觸發連接上的mouseover，而是要一直移動到連接的border上才觸發，而後移出border再觸發連接上的mouseover。由於border自己寬度小，只要鼠標的移動速度過快，瀏覽器就會反應不過來，連接上的mouseover和mouseout就不會被觸發！！如此一來，當鼠標快速地在各li上掃一遍後，就被掃過區域的圖像會一直顯示！！代理

這也說明監聽事件實際上是個很費計算量的事情，一旦事件發生得很快，瀏覽器對事件的監聽就不太靠譜了。因此要解決上面的問題，就得給瀏覽器響應的時間，能夠改爲監聽圖片的mouseout觸發車標的消失，但最好地，仍是精簡dom結構，再也不在連接裏嵌套圖片，把圖片內置成連接的背景，這樣連接變大就不會有上面的煩惱了。code

0x3鼠標移過，修改圖片路徑

實現效果seo

和上一題基本一個套路，總之要監聽mouseover這種進入子元素也會觸發的事件，就必定得防止連續觸發，不然就會和上一題同樣出現背離預想的效果、並且性能上也不太好。防止連續觸發的方法就是直接對最裏層的子元素做用。還有像上一題也提到的，對於這種覆蓋的事件還要保證元素的面積夠大、讓瀏覽器反應得過來。事件

還有一個點，就是加載動畫的實現，這裏用的是一個設置了半透明gif背景的div來作，直接覆蓋在展現區上。在mouseover觸發圖片切換時顯示這個div，直到要展現圖片load完畢，再觸發其消失便可。圖片

0x4複選框全選、全不選、反選

實現效果

稍微把思路理一下，這題總共監聽三個方面的點擊事件：全選框、反選連接、以及全體的複選框的代理。具體到每一個方面：全選框的點擊事件處理全體的複選框的勾選及自身文本內容的改變（‘全選’、‘全不選’）這兩件事、而反選連接在此基礎上還要處理全選框的勾選；至於全體的複選框則處理全選框的勾選和全選框文本內容的改變這兩件事。

這樣一理就清晰了，每一個監聽中的動做也就在三個操做中選：全體的複選框的勾選、全選框的勾選和全選框文本內容的改變，並且這三件操做都得依賴一個「是否所有勾選」的布爾值進行，因此這裏分別用三個函數實現這三個操做。最後，咱們只要在事件處理程序中得到這個布爾值傳給這幾個函數就能夠了，其中，全選框、反選連接能夠從全選框的checked屬性得到這個值，而全體的複選框要得到就得靠遍歷了。

0x5操做 input 標籤

實現效果

搞不懂原題想實現什麼，原來那個版本功能也沒作完，因而我就自做主張改爲實現表單獲值和重置了。經過這個也練習也補了一下表單的知識，關於這方面的總結我寫在《表單知識總結》這篇文章裏了。

0x6操做表單元素 select

實現效果

仍是表單控件的練習，和input同樣，select也有專有的API給咱們操縱，比單純用DOM方法方便高效，藉着此次練習把對選項的增刪改查都練了一遍吧。增刪利用select元素的add和remove方法實現，而要具體訪問和修改某個選項就得用options屬性得到選項集合再操做選項。此外，將options元素集的length置零還能夠直接清空全部選項，但options貌似是個只讀的屬性，給它直接賦null卻不能清空選項。