摘要：然而問題是，這個法則在導航條的主體是可行的但是子選單因為前面提到的三層嵌套構造圓角，已經無法減少嵌套了，同時還得考慮到子選單也是嵌套在導航條里的啊。。。同理，反過來進入子選單時自然就用來抵消達到篩選的目的。

實現效果：4-01setTimeout應用

又見導航條，先看下css，這里用的是雪碧圖背景做出圓角的效果，雖然是經典的方法、兼容性好，但這種代碼寫起來實在是有點丑陋。因為需要三層嵌套，分別用背景圖繪制左圓角、右圓角和中間背景，導致dom結構變復雜了、更進一步影響js的代碼簡潔。

而關于ui的動效，用的正是這一系列題目里經常出現的“hover父元素激活子元素”的方法來實現，于是自然又得用mouseover和mouseout這對兄弟了。但是我還是被這題坑了不少時間，因為有兩個兩點關鍵的問題想了好久才解決好：

首先得明白這題和前面題目的不同，前面那些題目其實都可以用css的hover偽類來實現，但這題不行，因為子選單和導航條的主體間是有間隙的，在鼠標從導航條到子選單的路上，子選單就會消失，根本到達不了。。。要解決這個bug，就需要題目提到的setTimeout登場了，離開選單時，我們可以讓它延遲消失、給用戶的鼠標到達子選單或重回導航條的時間；等再回到導航條或子選單就取消掉這個延時即可。

緊接著第二個大坑出現了，在前面的總結里也提到怎么用好mouseover和mouseout，由于這兩個事件會冒泡，同時由于他們只在跨界時觸發(fā)，而且一旦元素占地過小就會被瀏覽器忽略；為防止冒上來的事件亂成一團、或者該觸發(fā)的沒觸發(fā)，就應該做到減少元素嵌套，直接把事件監(jiān)聽綁定在具體元素上。

然而問題是，這個法則在導航條的主體是可行的、但是子選單因為前面提到的三層嵌套構造圓角，已經無法減少嵌套了，同時還得考慮到子選單也是嵌套在導航條里的啊。。。這樣一來某些元素除去子元素的范圍、占地就很小了，會出現前面提到的該觸發(fā)卻沒觸發(fā)的問題。具體在這題里的表現，就是當你的鼠標離開子選單時，由于子選單被子元素擠占得只剩一點地方了（具體可以按f12看一下），根本不能靠它觸發(fā)mouseout了，若要解決這個問題，就不得不接收里面子元素冒泡才會產生mouseout事件，有了事件才能進行元素顯隱的控制嘛。

但這又導致前面提到的另一個問題：舉例來說，鼠標離開子選單時，只要鼠標一掃冒泡上來的mouseout、mouseover事件就一大堆，而這時只有鼠標離開子選單那個mouseout才是應該奏效的。既然我們不能阻止和篩選子元素上的mouseout事件，那看來只有讓它和mouseover的效果相抵消了，因為只有在導航條里才會觸發(fā)這對事件，離開導航條后就沒有mouseover來和mouseout抵消了。同理，反過來進入子選單時自然就用mouseout來抵消mouseover達到篩選的目的。

于是就能總結出第二個坑的解決方法了：

首先要利用子元素的冒泡，這時就不能使用事件代理了（事件代理函數本身就有篩選事件來源的功能，沒法獲取子元素冒泡上來的事件），只能退而求其次，用一個循環(huán)來綁定事件吧。

通過mouseout和相應的mouseover事件進行抵消，達到變相篩選出事件的效果。但要注意，一般用這種抵消都會引起閃爍的，所以抵消并不是個通用的解決方法，只是因為正好由于這題使用了延時和解除延時，顯隱的結果不會立刻顯現，天然就防止了子選單閃個不停的結果出現。

剩下的代碼里還要解決幾個小問題：如解決使用了延時帶來的子選單切換卡頓、依照剩余可占寬度決定子選單該往左還是往右定位、同時讓箭頭自動保持在中間等等；相比上面兩個坑都算簡單的啦。

寫到這里才把解題思路捋清了，可見這看似簡單的幾行js要寫出來得有多蛋疼，這里真得吐槽下這個ui的問題：把子選單搞成細細的橫向條子其實還好，采用hover作選擇本來也ok，但這時你還專門讓子選單和導航條主體間有間隙，導致實現起來比較難之外，用戶也很容易誤操作啊，那么點地方放那么多mouseout和相應的mouseover事件的觸發(fā)點，手一抖、鼠標一滑很容易就選到別的地方去啊?。?/p> 0x2自動播放一幻燈片效果

實現效果：4-02自動播放一幻燈片效果

這次是做一個輪播圖，不同于那種滑動的輪播效果，這里用的是只是將圖片疊在一起然后改變透明度而已（我還另外在展示的圖片上加了個z-index，防止拖一下圖片就現形）。選擇控件上，用的仍然是這一系列題目喜聞樂見的“hover一個元素激活其他元素”，只不過這題因dom結構簡單，實現起來可比上一題簡單多了。

主要邏輯做起來也就兩個方面，通過監(jiān)聽控件來增刪類名以改變樣式、再加上自動定時播放就可以，這里我把播放和停止都封裝在一個單例里了（注意是定義在IIFE里），結構更清晰一點，也減少了全局變量。

但還有一個問題，那就是淡入效果的實現，思路自然是定時修改透明度，然而由于一開始給圖片直接添加類名已經讓它的透明度為1，導致圖片展示時是不透明-->透明-->不透明的過程，效果很不自然，于是干脆就直接把修改類名展示圖片的代碼去了，直接用淡入展示，效果更好同時又精簡了代碼。

最后再提醒下自己，用RegExp構造正則時，千萬別忘記的轉義！

實現效果：4-03自動改變方向一幻燈片效果

在上面一題多加個方向判斷函數而已，同時這里我把和輪播有關的東西全都封裝進了autoSlider這個單例里去了，全局變量現在就只剩這個單例，接口也可以寫得簡潔到只有一個初始化調用，真是清爽啊~

簡單體驗arguments而已，直接貼代碼：

function sum() {
    var result = 0;
    for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}

console.log(sum(1, 3, 5, 7));

實現效果：4-05css函數一設置、讀取對象的屬性

簡單的樣式獲取和修改，雖然增刪類名方式就可以輕松實現，但其實這題要的不只是效果，而是要模擬jquery的css函數。由于設定上，該函數的參數應該有三種情況：

接受一個css屬性名讀取值

接收一個對象（hash表）批量設置css屬性

傳入鍵、值兩個參數直接設置某個css屬性

所以要按參數個數和參數的類型分別進行操作，類型判斷最好使用Object.prototype.toString，這樣不會出現使用typeof時模棱兩可的結果。如果遇到不合法的參數數目和類型，就直接用throw拋出錯誤。

至于樣式的獲取，使用了標準的window.getComputedStyle方法，這個方法的兼容性其實也夠用了（IE8+），所以完全可以不用老舊的currentStyle。

而在設置樣式屬性時，要明白.和[]操作符的不同，使用點操作符號的屬性名必須首先是合法的變量名，而且不能是動態(tài)的引用（其實就是字符串了，只是引號可以省略罷了）；中括號操作符就不存在這種問題，所以elelment.sytle["background-color"]這種用法也能跑。

實現效果：4-06當前輸入框高亮顯示

繼續(xù)事件模擬css偽類的行為，這次終于不是老冤家hover了，改成了文本框focus，很自然就想到老套路：事件代理+增刪類名。但要注意焦點事件也有一對冒泡和不冒泡的事件存在，其中由于火狐不支持冒泡的focusin和focusout，只支持不冒泡的focus和blur，除非只考慮移動端，否則依賴冒泡的事件代理是不能用在處理焦點事件上滴。所以這里只好用一個循環(huán)來完成對所有元素的監(jiān)聽了。

至于修改的樣式，其實就相當于自定義文本框背景和outline樣式了，原題是用了背景圖來做，但這完全可以用css模擬嘛。然而由于這里輸入框是圓角的，除了火狐外并沒有瀏覽器實現outline的圓角，所以不能直接修改outline樣式了，只能假借邊框來實現該效果。同時還得記得把瀏覽器默認outline關掉，否則效果可就大打折扣。

實現效果：4-07數組練習：各種數組方法的使用

簡單的數組練習，就不按照原題那樣分幾個數組了，這里直接在一個數組上操作，再搭配一個簡單的處理流程：先用一個事件代理來監(jiān)聽和分發(fā)按鈕的點擊事件，處理完再輸出到dom即可。

具體的數組操作是比較簡單的，不過要注意concat和slice這兩個方法與眾不同，它們不是直接在調用數組上操作，而是另外生成新數組進行操作，返回的也是新數組。利用這一點可以實現數組的深拷貝，但若是想作用到原數組就得另外賦值了。

實現效果：4-08事件練習：封裝兼容性添加、刪除事件的函數

雖然做這系列的題本不想考慮老舊瀏覽器，但兼容事件畢竟是個經典問題，權當回顧下js高級程序設計里的內容了。采用的的也是書里的兼容方法，能用DOM2級別addEventListener和removeEventListener就用，再者就是兼容IE8以下的attachEvent和detachEvent（有this指向window、反向執(zhí)行的坑），這兩者都能綁定多個事件處理程序；最后實在不行再用只能綁定一個處理程序、但兼容性最佳的DOM0級。

實現效果：4-09星級評分系統

星星只是使用背景圖來改變亮滅而已，所以只要在容器上掛上對星星的click、mouseover、mouseout三個事件代理，剩下的就是一些DOM和數據操作了。

---第四課完---