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）可能会给您带来麻烦。

有没有办法写这个更短或更有效？

3 个答案: