代表团做什么而不是简单的('点击',......)？

Question

这两种不同的jQuery语句在性能和处理方面有何不同:

1. 第一名:

   $('#selector1, #selector2, .class1').on('click', function () { 
        //stuff
   });
   

2. 第二个:

   $(document).on('click', '#selector1, #selector2, .class1', function () { 
        //stuff
   });
   

我知道一个人做代表团而另一个人没有代表团.

但是,这是什么意思？

点击时不要两者都做某种动作'#selector1, #selector2, .class1'吗？

最后,是不是一样？

Answer 1

第一个将click事件挂钩到执行该语句时存在的元素.例如,处理程序直接挂钩到执行该调用时匹配的实际元素.

第二个将click事件挂钩在文档上,并且在收到任何单击时,将检查实际单击的元素是否与任何给定的选择器匹配,如果是,则将触发处理程序.这是事件委托而不是直接连接.

这意味着几件事:

1. 使用Number Two,点击稍后添加的元素将触发处理程序; 他们不会.
2. 只有像第二click号一样的冒泡事件(因为它依赖于将DOM冒泡到文档级别的事件).
3. 如果使用委托处理程序(第二个),并且某些其他代码将事件挂接到实际元素上,然后取消事件的传播(冒泡),则委派的处理程序将不会看到它.
4. 委托表单(第二个)必须匹配单击发生时单击的元素(可能是其祖先)与选择器匹配,这需要非零时间.不一定很多时间,但不仅仅是直接处理程序(不必这样做).如果在同一元素上有很多委托处理程序(在本例中为文档),您可能会开始注意到.

有时候使用直接挂钩的处理程序会更好,而事件委派(通常使用比聚焦更多的东西document)的时候更好.通常,它们之间的分界线是一个判断调用,但是例如,如果你想响应表行的点击,你可能最好用选择器挂钩元素click上的事件,而不是附加每个单独的事件表行,特别是如果您动态更新表.然而,如果你有一个独特的按钮,当你正在连接你的处理程序时你知道它存在于DOM中,并且当你想要在点击该按钮(但不是其他任何东西)时触发特定的函数,直接处理程序可能更有意义.tabletrclick

这是一个例子(实时拷贝):

HTML:

<p>Click me</p>

JavaScript的:

jQuery(function($) {

  $('p').on('click', function() {
    display("Directly-attached handler fired. Click this paragraph and note the difference in what happens compared to when you click the 'click me' paragraph.");
  });
  $(document).on('click', 'p', function() {
    display("Delegated handler fired.");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

请注意,当您单击"单击我"段落时,您会在文档中添加两个新段落,其中一个是第一个on调用的结果,另一个是第二个调用的结果.但请注意,如果单击这两个新段落中的任何一个,您只能看到第二个on调用(委托的)中的处理程序,而不是第一个.那是因为当你连接第一个处理程序时,那些段落不存在.

Answer 2

1. 该on()方法为jQuery对象匹配的每个元素附加一个事件处理程序.如果将可选选择器传递给on()方法,则仅当事件发生在该元素的后代时才会触发处理程序.

   因此,第一个示例将附加多个事件处理程序,因为jQuery对象包含3个元素.然而,第二个例子将附加一个单独的事件处理程序,它会处理click事件,所有'#selector1, #selector2, .class1'的

   显然,如果许多元素匹配,则第一个处于性能劣势(因为绑定了多个事件处理程序,与第二个示例中附加的单个事件处理程序相比).

   对于少数对象,在第一个示例中选择第二个示例最多是微优化.但是,如果你有很多元素(列表项,表中的行),你应该认真考虑使用第二个例子.

2. 因为on()将处理程序附加到jQuery对象匹配的每个元素,所以不能将处理程序直接附加到尚未包含在DOM中的元素(例如,如果您希望通过代码或通过AJAX以编程方式添加元素).这就是提供选择器作为参数的能力on()变得非常有用的地方; 这允许您将事件处理程序附加到当前在DOM中的元素,但是它将处理触发尚未在DOM中(但与您提供的选择器匹配的元素)的元素的事件.

   换句话说,在第一个示例中,jQuery将事件处理程序附加到与#selector1, #selector2, .class1选择器匹配的所有元素; 所以将遗漏尚未在DOM中注册的所有元素.

   另一方面,如果你使用第二个例子,jQuery会将一个事件处理程序附加到与document选择器匹配的所有元素(例如单个Document元素),并附加一个处理程序,如果它接收的事件来自匹配的元素,它将触发由选择器#selector1, #selector2, .class1; 这具有为所有未来#selector1, #selector2, .class1元素工作的优势.

   你可以在这里看到这个; http://jsfiddle.net/kntR7/

3. 因为第二个绑定到document,所以接受同一事件的处理程序的任何元素将在之前document接收处理程序(通过事件传播接收处理程序的最后一个地方),因此如果它选择使用event.stopPropagation()或取消该事件event.stopImmediatePropagation(),永远不会到达处理程序.

   你可以在这里看到这个; http://jsfiddle.net/mkNyU/