綁定事件的最佳方法？

我想作一個簡單的皮膚切換，在html如下所示：綁定事件的最佳方法？

<ul id="switcher"> 
    <li class="skin selected"> 
    <a href="#">Skin 1</a> 
    <ul class="color-variants"> 
     <li><label for="white"><input type="radio" name="skin" id="white" value="skin1-white" /></label></li> 
     <li><label for="black"><input type="radio" name="skin" id="black" value="skin1-black" /></label></li> 
    </ul> 
    </li> 
    <li class="skin no-variants"> 
    <label for="skin2">Skin 2</label> 
    <input type="radio" name="skin" id="skin2" value="skin2" /> 
    </li> 
</ul>

一號的皮膚會通過選擇顏色變一個單選按鈕被激活，而第二個是一個單一的標籤與無線電沒有變體的按鈕。

我需要JS說：

停止在皮膚顏色變體的默認鏈接操作
增加了類「選擇」到li.skin和顏色變標籤

我代碼：

var $switcher = $('#switcher'); 
$switcher.delegate('.skin a','click',function() { return false; }) 
.delegate('.color-variants label','click',function() { 
    var $this = $(this); 
    $switcher.find('.selected').removeClass('selected'); //remove all .selected 
    $this.closest('.skin').addClass('selected'); // add .selected to .skin 
    $this.parent().addClass('selected'); // add .selected to .color-variants label 
}) 
.delegate('.novariants label','click',function() { 
    $switcher.find('.selected').removeClass('selected'); //remove all .selected 
    $this.parent().addClass('selected'); // add .selected to skin 
});

有什麼辦法可以提高代碼的性能嗎？它是更有效地使用：的

$switcher.delegate('.skin a','click',function() {}). 
delegate('.color-variants label','click',function() {});

而不是綁定事件偵聽器，如：

$switcher.find('.skin a').bind('click',function() {}) 
.end().find('.color-variants label').bind('click',function() {});

還是應該是這個樣子：

$switcher.find('.skin').delegate('a','click',function() {}) 
.end().find('.color-variants').delegate('label','click',function() {});

？

來源

2011-12-22 user1112253

取決於你有多少.skin a元素，.delgate()可能更有效率（我剛剛發現的東西）。以this test爲例。

我只是去第一個選項，避免.find()和.end()。

來源

2011-12-22 19:39:32 maxedison

我對這個測試有點懷疑。表現可能在很大程度上取決於選手的表現。 Delegate使用'#nav'的最簡單的選擇器，jQuery優化。 Live/Delegates還需要額外的機制來將事件綁定到新創建的dom元素，這在這種測試中並不明顯。無論哪種方式，我認爲這裏的性能問題都是一個問題，作者應該把重點放在這樣一個案例中的可讀性和可維護性上。 – Koobz 2011-12-22 19:44:28

我當然同意你的最後一句話。但是我昨天正在研究delegate（或者'on'）的性能，昨天發現了很多人說如果替代方案需要綁定到一堆不同的元素，速度會更快。我想這是更快的綁定，而不是處理程序的執行（由於它必須冒泡到委託元素，所以肯定會更慢）。 – maxedison 2011-12-23 16:22:37

綁定事件的最佳方法？

回答

相關問題