2011-11-24 198 views
3

所以我只是想添加一些函數來盤旋。下面是關於相同的事情,除了用for循環我有目標存儲在一個數組中。我其實有幾個問題。使用jquery/javascript做下面的最佳做法是什麼?

  1. 這是stopPropagation的正確用法嗎?
  2. 什麼做這樣的事情的最佳做法?
  3. 其中下面方法的一個速度更快,使用更少的資源?
  4. 我知道我可以使用懸停(),但我用綁定,因爲我認爲這是更快的,是我的思想是否正確?

謝謝

for (var i in slides) { 
     $(slides[i].el).bind({ 
      mouseenter: function (event) { 
       event.stopPropagation(); 
       // do something 
      }, 
      mouseleave: function (event) { 
       event.stopPropagation(); 
       //do something 
      } 
     }); 
    } 

    $("#vehicleSlides .vehicleAreas").bind({ 
     mouseenter: function (event) { 
      event.stopPropagation(); 
      // do something 
     }, 
     mouseleave: function (event) { 
      event.stopPropagation(); 
      //do something 
     } 
    }); 

回答

2

1 - 這是正確的使用stopPropagation

如果你想阻止事件冒泡DOM樹,那麼是的。

2 - 什麼是做這樣的事情

個人最好的做法,我更喜歡jQuery選擇之後的方法,但是這僅僅是一個偏好。最佳實踐是您和您的團隊都一致認同和使用的任何風格。

3 - 其中下面方法的一個速度更快,使用更少的資源

在實際應用中,會出現下一個在兩者之間沒有差別。

4 - 我知道我可以使用懸停(),但我用綁定,因爲我認爲這是快,我想正確的

jQuery的懸停方法是綁定到了mouseenter和鼠標離開速記事件,所以會有一個使用懸停的額外函數調用,但是性能幾乎沒有區別。

+0

我想停止冒泡,我的意思是如果停止冒泡是正確的做法。在速度方面,停止冒泡不是更好嗎?我只想在那一個元素上使用函數,所以停止冒泡不是更好嗎? – Huangism

+0

也許,但瀏覽器*應該針對冒泡行爲進行優化,所以在不停止傳播或可能沒有傳播的情況下可能會有性能提升。你需要全部測量它們。實際上,最好是表達意圖而不是關注微觀優化。在現代瀏覽器中,性能方面的差異很小。 –

+0

好的謝謝,我只是想盡可能實現最好的代碼,但不太確定那是什麼。 – Huangism

0

最佳做法將使一貫正確的功能的優先級最高,所以這取決於是否將事件應該由一次處理的父節點可以看到或聽到。

這取決於你的設計。例如,在一個「窗口」般的對象要能夠拖動周圍,你既可以A.連接鼠標處理整個窗口,或B.附加一個偵聽孩子「背景」對象檢測鼠標放下事件開始拖動。

如果您選擇設計B.,那麼您必須確保不希望接收鼠標事件的標籤和其他對象禁用鼠標事件(在Flash [AS3]中將mouseEnabled和mouseChildren設置爲false;不確定JavaScript的)。這種設計的一個缺點是,它會阻止U.I.中的任何對象。從被動地處理或修改冒泡階段的事件行爲,因爲捕獲階段的任何攔截都會阻止它首先到達背景。這種設計的一個特點是,通過允許事件冒泡,您可以讓監視器和其他全局效果處理更高級別的鼠標點擊。

在另一方面,如果你選擇的設計A.,那麼你不必擔心使子對象透明的鼠標(在標籤上的事件仍然會向上冒泡到窗口容器本身),但相反,您必須確保在處理事件後停止子對象(如按鈕)上的事件傳播,以便它們不會到達層次結構頂部的窗口處理程序。這實際上取決於你希望如何運作,而混合方法可能是最好的。

你可以擁有這歸因於設計科學到「設計」是不是設計的所有的點,但已知爲真的科學複雜的道理。

此係統的任何瀏覽器優化將涉及跟蹤,在捕獲階段,其中父節點具有連接爲事件類型氣泡相事件處理程序。例如,如果它知道沒有父節點有處理程序就進入了目標/冒泡階段,它可以跳過整個冒泡階段,或者直接跳到已知有處理程序的節點。然而,這是糟糕的設計,IMO,因爲您可能希望在捕獲或冒泡期間的任何時候將新的處理程序附加到父節點,或者您可能想要將節點移動到另一個父級,以嘗試使事件冒出不同的母鏈。試試看看它在不同瀏覽器中的表現如何。有必然是巨大的矛盾象別的涉及HTML渲染和事件處理,在這兩個行爲和性能方面:P

0

有可能不能結合和懸停多大區別。避免工作總是一件值得考慮的事情,但有1-3個更多的函數調用來處理事件處理程序並不會影響現代JIT的性能。

你並沒有錯誤地引用stopPropagation,但如果你沒有特別的理由,除了冒泡讓你感到不舒服,或者因爲你害怕觸發別的東西,那麼是的,你做錯了。

UI工作的首要原則應始終是:

不要做任何你不需要做

例子:

  • 不解決問題,你還沒有。
  • 不要做任何「以防萬一」,因爲這意味着你不知道實際發生了什麼,並且在你調用UI中的任何事情之前,你真的需要了解你的東西實際上做了什麼以及它是如何工作的。
  • 不要阻止人們以不同於預期的方式使用您的用戶界面。例如驗證HTML格式並在有人試圖讓你寫的內容有點不同時拋出錯誤。你在做什麼,運行客戶支持熱線?它幫助沒有人/不提供任何服務。如果他們更喜歡更多的語義正確的無序列表到一堆div,有什麼關係?

但在stopProp具體地說,如果你必須使用它(它可以解決一些問題非常優雅所以不要說永不)嘗試只命中端點節點與它這樣其他的東西可以添加到同一容器中不失冒泡的好處。是的,我說的好處。不要害怕冒泡。如果你的HTML是一個完整的災難(它應該只是容器一直回到正文,對嗎?),回溯祖先線的事件只會觸發其他UI事件。

此外,如果您可以在採取措施之前驗證處理程序中是否包含正確的目標元素,請執行此操作而不是stopProp。但當人們在寫入的每個UI處理程序中添加return falsee.stopPropagation時,它就會讓我氣憤。尤其是當他們自己從一個包含比所討論的主動元素多得多的容器中拾取事件時。

所以不要這樣做。我們有一天可能會在同一間辦公室工作,我會變得無法忍受,我會破壞你的芝士蛋糕。

相關問題