更好的使用jQuery處理程序？

我的意思是，如果我有這樣的處理程序：更好的使用jQuery處理程序？

$(document).ready(function() { 
    $('.myElement').change(function() { 
     // some 
    });    
});

鏈接到「400」的元素，例如，它會比慢

function myFunct() { 
    // some 
{ 

<select class="myElement'" onchange="myFunct(this);return false"> 
    // one of 400 elements. Each of this use that onchange link 
</select>

因爲其實我只需要調用該函數時我「改變」了一些東西（所以我不明白爲什麼我需要處理400個元素，最糟糕的資源）。

您怎麼看？

來源

2011-08-20 markzzz

是的，它會比較慢，因爲瀏覽器必須附上處理所有這些元素，這可能會導致頁面加載時出現「延遲」，在此期間用戶可能能夠與沒有附加處理程序代碼的元素進行交互。

但是，您仍然可以以高性能的方式使用jQuery，但只需使用一個delegated處理程序。

$('#container').delegate(".myElement", "change", function() { 
    myFuct(this); 
    return false; 
});

更新！ jQuery的1.7例子（使用.on）：

$('#container').on("change", ".myElement", function() { 
    myFuct(this); 
    return false; 
});

來源

2011-08-20 16:53:12 karim79

呃...所以委託不會附加所有這些元素？ Interessant ... – markzzz

@markzzz - 是的，它僅附加到指定的父元素，並檢查點擊是否從匹配作爲第一個參數傳入的選擇器的元素冒泡。 – karim79

我認爲在這種情況下第二個更好。您可以使用jQuery你的函數裏面，太

http://jsperf.com/testaaa

jQuery的電話：67194 /秒

你的函數調用：114142715 /秒

來源

2011-08-20 16:52:13 genesis

？不知道這些測試的來源：ö我沒有攻擊任何東西「onchange」爲每個選擇...爲什麼114,142,715 /秒？ – markzzz

@markzzz：這只是測試性能 – genesis

但是什麼？在第二個例子中，沒有任何類型的附加/處理器：O – markzzz

在這裏你去：

$(function() { 

    function myFunct() { ... } 

    $('.myElement').change(myFunct); 

});

的竅門是定義一個函數對象，然後用一個功能作爲更改處理所有元素。

來源

2011-08-20 16:53:27

這仍然會將單獨的點擊處理程序附加到這400個元素。 – karim79

@ karim你確定嗎？我看到它的方式，只有一個函數對象 - 'myFunct'，ergo，有一個處理程序。這400個元素中的每一個都會引用這個處理程序（哪個*是一個downer），但是同樣只有一個處理程序，對吧？ –

呃是的......但實際上我已經處理了400個可能我永遠不會使用的元素（所以最糟糕的資源）。否則，我只需要在需要時調用函數:) – markzzz

更好的使用jQuery處理程序？

回答

相關問題