摘要：然而問(wèn)題是，這個(gè)法則在導(dǎo)航條的主體是可行的但是子選單因?yàn)榍懊嫣岬降娜龑忧短讟?gòu)造圓角，已經(jīng)無(wú)法減少嵌套了，同時(shí)還得考慮到子選單也是嵌套在導(dǎo)航條里的啊。。。同理，反過(guò)來(lái)進(jìn)入子選單時(shí)自然就用來(lái)抵消達(dá)到篩選的目的。

實(shí)現(xiàn)效果：4-01setTimeout應(yīng)用

又見導(dǎo)航條，先看下css，這里用的是雪碧圖背景做出圓角的效果，雖然是經(jīng)典的方法、兼容性好，但這種代碼寫起來(lái)實(shí)在是有點(diǎn)丑陋。因?yàn)樾枰龑忧短祝謩e用背景圖繪制左圓角、右圓角和中間背景，導(dǎo)致dom結(jié)構(gòu)變復(fù)雜了、更進(jìn)一步影響js的代碼簡(jiǎn)潔。

而關(guān)于ui的動(dòng)效，用的正是這一系列題目里經(jīng)常出現(xiàn)的“hover父元素激活子元素”的方法來(lái)實(shí)現(xiàn)，于是自然又得用mouseover和mouseout這對(duì)兄弟了。但是我還是被這題坑了不少時(shí)間，因?yàn)橛袃蓚€(gè)兩點(diǎn)關(guān)鍵的問(wèn)題想了好久才解決好：

首先得明白這題和前面題目的不同，前面那些題目其實(shí)都可以用css的hover偽類來(lái)實(shí)現(xiàn)，但這題不行，因?yàn)樽舆x單和導(dǎo)航條的主體間是有間隙的，在鼠標(biāo)從導(dǎo)航條到子選單的路上，子選單就會(huì)消失，根本到達(dá)不了。。。要解決這個(gè)bug，就需要題目提到的setTimeout登場(chǎng)了，離開選單時(shí)，我們可以讓它延遲消失、給用戶的鼠標(biāo)到達(dá)子選單或重回導(dǎo)航條的時(shí)間；等再回到導(dǎo)航條或子選單就取消掉這個(gè)延時(shí)即可。

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

然而問(wèn)題是，這個(gè)法則在導(dǎo)航條的主體是可行的、但是子選單因?yàn)榍懊嫣岬降娜龑忧短讟?gòu)造圓角，已經(jīng)無(wú)法減少嵌套了，同時(shí)還得考慮到子選單也是嵌套在導(dǎo)航條里的啊。。。這樣一來(lái)某些元素除去子元素的范圍、占地就很小了，會(huì)出現(xiàn)前面提到的該觸發(fā)卻沒(méi)觸發(fā)的問(wèn)題。具體在這題里的表現(xiàn)，就是當(dāng)你的鼠標(biāo)離開子選單時(shí)，由于子選單被子元素?cái)D占得只剩一點(diǎn)地方了（具體可以按f12看一下），根本不能靠它觸發(fā)mouseout了，若要解決這個(gè)問(wèn)題，就不得不接收里面子元素冒泡才會(huì)產(chǎn)生mouseout事件，有了事件才能進(jìn)行元素顯隱的控制嘛。

但這又導(dǎo)致前面提到的另一個(gè)問(wèn)題：舉例來(lái)說(shuō)，鼠標(biāo)離開子選單時(shí)，只要鼠標(biāo)一掃冒泡上來(lái)的mouseout、mouseover事件就一大堆，而這時(shí)只有鼠標(biāo)離開子選單那個(gè)mouseout才是應(yīng)該奏效的。既然我們不能阻止和篩選子元素上的mouseout事件，那看來(lái)只有讓它和mouseover的效果相抵消了，因?yàn)橹挥性趯?dǎo)航條里才會(huì)觸發(fā)這對(duì)事件，離開導(dǎo)航條后就沒(méi)有mouseover來(lái)和mouseout抵消了。同理，反過(guò)來(lái)進(jìn)入子選單時(shí)自然就用mouseout來(lái)抵消mouseover達(dá)到篩選的目的。

于是就能總結(jié)出第二個(gè)坑的解決方法了：

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

通過(guò)mouseout和相應(yīng)的mouseover事件進(jìn)行抵消，達(dá)到變相篩選出事件的效果。但要注意，一般用這種抵消都會(huì)引起閃爍的，所以抵消并不是個(gè)通用的解決方法，只是因?yàn)檎糜捎谶@題使用了延時(shí)和解除延時(shí)，顯隱的結(jié)果不會(huì)立刻顯現(xiàn)，天然就防止了子選單閃個(gè)不停的結(jié)果出現(xiàn)。

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

寫到這里才把解題思路捋清了，可見這看似簡(jiǎn)單的幾行js要寫出來(lái)得有多蛋疼，這里真得吐槽下這個(gè)ui的問(wèn)題：把子選單搞成細(xì)細(xì)的橫向條子其實(shí)還好，采用hover作選擇本來(lái)也ok，但這時(shí)你還專門讓子選單和導(dǎo)航條主體間有間隙，導(dǎo)致實(shí)現(xiàn)起來(lái)比較難之外，用戶也很容易誤操作啊，那么點(diǎn)地方放那么多mouseout和相應(yīng)的mouseover事件的觸發(fā)點(diǎn)，手一抖、鼠標(biāo)一滑很容易就選到別的地方去啊！！

實(shí)現(xiàn)效果：4-02自動(dòng)播放一幻燈片效果

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

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

但還有一個(gè)問(wèn)題，那就是淡入效果的實(shí)現(xiàn)，思路自然是定時(shí)修改透明度，然而由于一開始給圖片直接添加類名已經(jīng)讓它的透明度為1，導(dǎo)致圖片展示時(shí)是不透明-->透明-->不透明的過(guò)程，效果很不自然，于是干脆就直接把修改類名展示圖片的代碼去了，直接用淡入展示，效果更好同時(shí)又精簡(jiǎn)了代碼。

最后再提醒下自己，用RegExp構(gòu)造正則時(shí)，千萬(wàn)別忘記的轉(zhuǎn)義！

實(shí)現(xiàn)效果：4-03自動(dòng)改變方向一幻燈片效果

在上面一題多加個(gè)方向判斷函數(shù)而已，同時(shí)這里我把和輪播有關(guān)的東西全都封裝進(jìn)了autoSlider這個(gè)單例里去了，全局變量現(xiàn)在就只剩這個(gè)單例，接口也可以寫得簡(jiǎn)潔到只有一個(gè)初始化調(diào)用，真是清爽啊~

簡(jiǎn)單體驗(yàn)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));

實(shí)現(xiàn)效果：4-05css函數(shù)一設(shè)置、讀取對(duì)象的屬性

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

接受一個(gè)css屬性名讀取值

接收一個(gè)對(duì)象（hash表）批量設(shè)置css屬性

傳入鍵、值兩個(gè)參數(shù)直接設(shè)置某個(gè)css屬性

所以要按參數(shù)個(gè)數(shù)和參數(shù)的類型分別進(jìn)行操作，類型判斷最好使用Object.prototype.toString，這樣不會(huì)出現(xiàn)使用typeof時(shí)模棱兩可的結(jié)果。如果遇到不合法的參數(shù)數(shù)目和類型，就直接用throw拋出錯(cuò)誤。

至于樣式的獲取，使用了標(biāo)準(zhǔn)的window.getComputedStyle方法，這個(gè)方法的兼容性其實(shí)也夠用了（IE8+），所以完全可以不用老舊的currentStyle。

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

實(shí)現(xiàn)效果：4-06當(dāng)前輸入框高亮顯示

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

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

實(shí)現(xiàn)效果：4-07數(shù)組練習(xí)：各種數(shù)組方法的使用

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

具體的數(shù)組操作是比較簡(jiǎn)單的，不過(guò)要注意concat和slice這兩個(gè)方法與眾不同，它們不是直接在調(diào)用數(shù)組上操作，而是另外生成新數(shù)組進(jìn)行操作，返回的也是新數(shù)組。利用這一點(diǎn)可以實(shí)現(xiàn)數(shù)組的深拷貝，但若是想作用到原數(shù)組就得另外賦值了。

實(shí)現(xiàn)效果：4-08事件練習(xí)：封裝兼容性添加、刪除事件的函數(shù)

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

實(shí)現(xiàn)效果：4-09星級(jí)評(píng)分系統(tǒng)

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

---第四課完---