js事件委託代碼優化【感悟總結】

前兩天接手了同事的一個項目，是一個網站首頁，其中有段代碼很累贅，要實現的功能就是，

經過給父元素添加鼠標移入移出事件，來控制子元素顯示隱藏。

html代碼，一共有四個父元素div，每一個父元素嵌套一個子元素div，

這是截取了其中一個div：

最簡單粗暴的方法莫過於這樣：

直接寫八個方法，分別設置屬性的樣式block或者none。

這樣寫雖然簡單，可是出於代碼優化，頁面響應速度的關係，咱們仍是須要改動的。

問了問同事，說看看有關事件委託的相關方法，能有效解決這個問題。

通過一頓操做以後，樓主寫出了以下代碼：

注：ev.srcElement是IE中的用法，target是非IE中的用法。

也能夠這麼用   obj = ev.srcElement ? ev.srcElement ： ev.target；

這麼寫能實現效果了，但是在查看控制檯的時候居然一片飄紅。

實在是頭痛啊，看到這個。明明效果實現了，爲何還報錯呢？

今天中午午休的時候，趴着想了想，忽然就來了靈感。

這是修改以後的代碼。看完你就明白，這是由於target指代的是當前對象，

當鼠標移到父元素div時，子元素div屬性變爲block，會顯示出來。

可是當你移動到子元素div上時，target就指向了子元素，而子元素沒有firstElementChild，因此會報錯。

這時咱們只需加個判斷，若是子對象不存在，那麼就修改當前對象的屬性。

不然，也就是子對象存在的狀況，那就修改子對象屬性。

通過了兩天的折騰，終於優化了這麼一小段代碼。

原本是想到的for循環，可是這樣循環下來，dom操做仍是不少。

感謝給我提醒事件委託的那位朋友，以上代碼有不足之處歡迎指教。

剛參加工做，還有不少學習的地方，歡迎你們提出批評建議。