Javascript 用于添加动态添加元素的事件的$（document）和$（'；parentSelector'；）的差异？

在使用$（文档）作为

单击事件的选择器时，我对$（文档）感到困惑？是否有任何差异或cos而不是仅使用父选择器？
它们都产生相同的输出，但有没有像执行速度这样的因素

你可以测试一下

使用父选择器

    $(".parent").on("click", "button.btn", function(){
        $(".parent").append("<button class = 'btn'> new button  " + (++counter) + "</button><br />");
    });

$（.parent”）。在（“单击”，“按钮.btn”，函数（）上{
$（“.parent”）.append（“新建按钮”+（+++计数器）+“
”；
});

或$（文档）

$（document）.on（“单击”，“按钮.btn”，函数（））{
$（“.parent”）.append（“新建按钮”+（+++计数器）+“
”；
});
您需要提供最接近的父选择器，该选择器不会动态生成，所有需要事件委托的未来元素都应该是静态父元素的子元素

在性能方面，与附加到文档或页面正文相比，将事件委托给最接近的静态父级更为可行。
通常应绑定到包含要委托给的动态元素的限制性最强的元素。委派的工作方式是，每次绑定到的元素中的任何位置发生事件时，都会运行内部jQuery处理程序。此处理程序执行检查，以查看目标是否与选择器参数匹配，如果匹配，则调用处理程序函数

因此，如果您使用
$（document.），则无论何时单击页面上的任何位置，它都必须执行此检查。但是如果您使用
$（“.parent”）。在
上，它只需在您单击父元素内部时进行检查。这减少了浏览器的开销

此外，委托还取决于绑定到的元素的冒泡事件。如果有一个元素包含
button.btn
，并且它有一个调用
event.stopPropagation（）
的单击处理程序，这将取消冒泡，jQuery的内部处理程序将永远不会运行。绑定到父级应该不太可能出现这种情况。
出于浏览器的考虑，请使用父级选择器。：）谢谢
    $(".parent").on("click", "button.btn", function(){
        $(".parent").append("<button class = 'btn'> new button  " + (++counter) + "</button><br />");
    });

    $(document).on("click","button.btn",function(){
        $(".parent").append("<button class = 'btn'> new button  " + (++counter) + "</button><br />");
    });