3

鉴于这两个关于事件触发器的 jquery

$(document).on("click", "a[data-trigger='colorbox']",function(e){

$("a[data-trigger='colorbox']").on("click",function(e){

当我使用第一个颜色框时，我必须单击两次锚标记才能触发颜色框。对于后续的点击，它不需要第二次点击来触发。但是对于第二个，颜色框在第一次单击时触发。两者有什么区别吗？

我的功能内容如下

e.preventDefault();
var currentTarget = $(e.currentTarget);
currentTarget.colorbox({inline : true, href : currentTarget.data("href")});
4

2 回答 2

2 
$(document).on("click", "a[data-trigger='colorbox']",function(e){

This binds a click event to the document and all child elements within it. This click event then checks if the clicked element matches the filter a[data-trigger='colorbox']

the later:

$("a[data-trigger='colorbox']").on("click",function(e){

binds the click event to the a[data-trigger='colorbox'] directly.

Now if your element is dynamic you would want to use the first one. As this means you don't have to keep rebinding your click event. If your element is static then you want to use the later as it's more efficient.

A third way (or a more efficientway to do the first option) is to bind this to a parent element that is static as opposed to the document and then filter on the element being clicked, i.e. 

$(parent).on("click", "a[data-trigger='colorbox']",function(e){

this is more efficent because it does not need to capture click events on the entire document

于 2013-04-29T14:53:08.577 回答
1

第一种方法捕获从元素通过其父元素直到文档冒泡的事件。此方法称为委托事件处理

第二种：直接在元素上捕获事件。

后台发生了什么：

文件结构：

  • 文档
    • 祖父母
      • 父母
        • 元素
      • 父母2
    • ...

事件：用户点击元素

结果：

  1. 元素的所有点击监听器都被执行*（你的第二种情况）
  2. 事件开始冒泡
  3. 父级的所有点击监听器都被执行 *
  4. 祖父母的所有点击监听器都被执行 *
  5. 文件的所有点击监听器都被执行*（你的第一种情况）

*侦听器获取事件对象，并有可能通过调用取消冒泡：

  • event.stopPropagation()：不让事件传播给父母，但在当前级别执行所有侦听器。
  • event.stopImmediatePropagation()：不让事件传播给父母，也不会在同一级别上调用其他侦听器

JQuery 可以在绑定到文档的侦听器中处理元素的单击事件，因为在每一层上，您都可以检查单击事件对象以获取信息：

  • 当前正在处理的事件event.currentTarget
  • 最初被点击的元素event.target

更多jQuery 文档

回到你的情况

案例2

很简单：

  1. 元素被点击
  2. 它的处理程序被执行

如果元素是动态添加/删除等。你必须照顾它的处理程序（分配/取消分配等）

情况1

单击该元素：

  1. 事件冒泡直到文档
  2. 文档上的处理程序被调用
  3. 处理程序验证事件是否来自对您的元素进行的单击

如果您的元素是动态添加/删除的，并且您不想在其上管理点击处理程序，您应该选择此解决方案。尽管如此，您不应该在文档上分配它，因为每次点击页面都会调用基本侦听器，jQuery 将检查是否target是您感兴趣的元素，如果是则调用您指定的处理程序。总而言之，如果过度使用，这会降低性能。

了解所有这些应该可以帮助您找出您所处情况的行为差异。

于 2013-04-29T14:50:32.360 回答