有沒有辦法寫這個更短或更有效？

Question

我有十個像這樣的代碼塊，它全部用於動態創建的內容：

$(document).on('click', '.item' , function() {
    //... do something
});

$(document).on('click', '.element' , function() {
    //... do something different
});

有沒有辦法寫這個更短或更有效？

Answer 1

您可以緩存文檔選擇器。

var $document = $(document);

$document.on('click', '.item' , function() {
    //... do something
});

$document.on('click', '.element' , function() {
    //... do something different
});

但那是關於它的。

編輯：如果您需要硬數據，請為我的jsPerf提供測試。

Answer 2

不幸的是，事實並非如此。 這是唯一的方法，因為函數內部的內容是不同的

Answer 3

您可以做的一件事是在選擇器和處理程序之間創建一個映射：

var handlers = {
  '.item' : function() {
    //... do something
   },

  '.element' : function() {
    //... do something different
  }
}

然后，您可以在一個快速迭代中分配處理程序：

var $doc = $(document); // no need to wrap the document each time
for (var selector in handlers) {
  if (handlers.hasOwnProperty(selector))
    $doc.on('click', selector, handlers[selector]);      
}

關於效率的另一個評論（參見@ ArunPJohny的評論）。 如果您可以將處理程序分配給DOM樹中較低的元素（遠離文檔），那么您應該這樣做。 在這個結構中：

$(static).on('click', dynamic, f);

對於到達$（靜態）集合中的元素的每個click事件，匹配動態選擇器以查看是否應該觸發f。 如果static是文檔，則頁面中的所有點擊都將匹配。 如果您可以獲得更具體的元素，則可以匹配更少的點擊次數。 對於點擊，您可能不會注意到很大的差異，但更快觸發的事件（mousemove）可能會給您帶來麻煩。