jQuery：在这种情况下，.on（）的正确用法是什么？

Question

考虑以下标记：

 <div class="parent">
     <div class="child">
         button
    </div>
 </div>

我需要在child类的click事件上运行一个函数，并且有以下两个选项：

 $(".parent").on("click", ".child", function(){....});

和

 $(document).on("click", ".child", function(){....});

使用直接parent对象作为目标与document本身之间在性能上有显着差异吗？ 对我来说，使用document似乎是一个更可靠的选择（例如，如果更改了父类）-仅需确保如果我开始在各处使用此方法，就不会引起问题。

PS child被动态添加到parent内部，因此我正在使用.on()

Answer 1

$(".parent").on("click", ".child", function(){....});

将您的click事件仅绑定到文档中存在的类“ .parent”的元素，并且该事件从target（'。child'）冒泡到附加了处理程序的元素。 这比将其添加到文档中，将其添加到文档中这样更可取

$(document).on("click", ".child", function(){....});

Answer 2

在您的情况下，“性能”应该不是问题。

您的两个选择之间有明显的区别：

 <div class="parent">
     <div class="child" id="A">
         button
     </div>
 </div>
 <div class="child" id="B">
     button
 </div>

如果将处理程序绑定到document ，则单击#B将触发该处理程序。
如果将处理程序绑定到.parent ，则单击#B不会触发该处理程序。

您必须决定是要监听文档中所有带有.child类标记的节点，还是只.parent嵌套在.parent元素下的.parent 。

要考虑的其他要点：

恕我直言，最好是尽可能缩小您的行动范围。 从您的问题来看， $('.parent')似乎是最好的目标。
但是，如果.parent元素也被动态添加/删除，请不要将它们用作绑定目标。 尝试以您创建的其他节点为目标，但这些节点将始终保留在DOM中（例如：将html包裹在#myModule div中，并将事件绑定到$('#myModule') ）。
.stopPropagation() ：委托与直接绑定的主要区别在于，当事件冒泡到目标节点时，将执行处理程序。
如果您依靠.stopPropagation()或return false来阻止其他处理程序的执行，则这会影响事件实际停止的时间。
这是一个小提琴来说明这一点。