帶/不帶選擇器參數和jquery委託的jquery之間有什麼區別？

我正在使用jQuery 1.10。我想知道這三個功能之間有什麼不同。帶/不帶選擇器參數和jquery委託的jquery之間有什麼區別？

哪個功能更好，爲什麼？

委託功能的目的是什麼？

$(".dropdown-menu").on("click", ".show_opt_menu", function() { 
    alert("hello"); 
}); 
$(".dropdown-menu .show_opt_menu").on("click", function() { 
    alert("hello"); 
}); 
$(".dropdown-menu").delegate(".show_opt_menu", "click", function() { 
    alert("Delegate"); 
});

有人可以解釋我嗎？

來源

2014-09-04 kamalpreet

'on'是新的'delegate'就像我知道.. – harpax 2014-09-04 09:40:22

首先，第三個函數（.delegate）已被.on（jQuery 1.7以上）取代，所以我不會使用它。

第二種方法將運行復雜的選擇「.dropdown菜單.show_opt_menu」，這是（相對）昂貴，因爲它首先獲取所有.show_opt_menu當時的看，看哪個父母是.dropdown-menu。然後它爲每個元素綁定一個事件。這是（相對）昂貴的，因爲你正在運行一個緩慢的查詢，然後綁定潛在的許多事件。

第一種方法是最好的，因爲它只綁定一個事件到.dropdown-menu，然後每當一個事件冒泡時它就會檢查事件以查看原始目標是什麼。這是一個更便宜的選項，並且由於只有一個事件被綁定，所以它的性能更高。

摘要：＃1是最好的，＃2通常做的更糟，＃3已經過時。

無論如何，您可能不會注意到任何性能差異，但無論如何它值得注意，因爲這是一種很好的做法。在某些時候，你可能需要關注自己的表現。

來源

2014-09-04 09:40:11 Joe

但.delegate仍然與我的jquwery1.11 – kamalpreet 2014-09-04 09:40:44

已過時意味着它仍然有工作，只是他們建議你不要使用它。 '.on'已經正式取代它 - 參見http://api.jquery.com/delegate/ – Joe 2014-09-04 09:41:26

'$ .on（'evt'，'selector'，callback）;'在內部簡單地轉發到'$。代表'，上次我查了。這不是真的廢棄，它只是一個別名 – 2014-09-04 09:42:24

第一個是委託事件處理程序。在決定使用所提供的選擇器過濾鼓泡元素鏈（即.show_opt_menu）之前，它監聽鼓起達.dropdown-menu的事件。然後它將您的函數應用於導致事件的任何匹配元素。 這是首選的方式（特別是如果你有動態內容）。

第二個是各個元素上的標準事件偵聽器，並導致多個事件處理程序連接。這些代碼在運行時必須存在（而不是事件發生時）。

最後一個與第一個相同，但可讀性較差，已被on正式取代：http://api.jquery.com/delegate/：「從jQuery 1.7開始，.delegate（）已被.on（）方法取代。，但它仍然是使用事件委託最有效的方法「

在前兩個選項中，我的個人偏好總是使用委派的事件處理程序更有效。但是，由於此示例適用於click事件，因此任何解決方案之間的速度差異可以忽略不計（除非您可以每秒單擊5萬次）。 :)

來源

2014-09-04 09:38:27

。代理（）

現在或將來，基於一組特定的根元素，將處理程序附加到one or more events for all elements that match the selector。

.delegate（）已通過。對（）方法

來源

2014-09-04 09:47:17

$(".dropdown-menu").on("click", ".show_opt_menu", function() { 
alert("hello"); 
});

這個功能十分點擊事件.dropdown菜單執行時，目標元素是.show_opt_menu 取代，這意味着當你動態地添加另一個.show_opt_menu不需要附加點擊功能。父母負責點擊操作。

$(".dropdown-menu .show_opt_menu").on("click", function() { 
alert("hello"); 
});

此功能的附加單擊事件.show_opt_menu所以當你動態地添加新的.show_opt_menu你需要單獨附上事件了這一點。

$(".dropdown-menu").delegate(".show_opt_menu", "click", function() { 
alert("Delegate"); 
});

的同一目的的

來源

2014-09-04 09:50:52 vimalpt

帶/不帶選擇器參數和jquery委託的jquery之間有什麼區別？

回答

相關問題