JQuery 事件处理程序 - "Best"方法是什么

Question

以下在 JQuery 中附加事件处理程序的方法有什么区别？

(function () {

    var $body = $("body");

    $('button').click(function () {
        console.log(this) + " - 1";
    });

    $('button').on('click', function () {
        console.log(this) + " - 2";
    });

    $(document).on('click', 'button', function () {
        console.log(this) + " - 3";
    });

    $body.on('click', 'button', function () {
        console.log(this) + " - 4";
    });

    $body.find('button').on('click', function () {
        console.log(this) + " - 5";
    });
})();

我发现在某些情况下，一种似乎有效，另一种则无效。例如下面的处理程序 2，不工作，而处理程序 1 工作。为了完成这项工作，我必须实现Handler 3，这显然效率较低。

$retrieveCust = $("#bxRetrieveCustomer");

// Handler 1
$retrieveCust.find(".icoX").on("click", function () {
    // DO SOMETHING
});

// Handler 2
$retrieveCust.find(".tag-open").on("click", function () {
    // DO SOMETHING
});

// Handler 3
$(document).on("click", ".tag-open", function (event) {
    // DO SOMETHING
}); 

这是 HTML

<div class="box" id="bxRetrieveCustomer">
<h1>RETREIVE CUSTOMER</h1>
<div class="icoX">X</div>
<div class="box-liner10">
    <table>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Date of Birth</th>
            <th>Email</th>
            <th>password</th>
            <th></th>
        </tr>
        <!-- ko foreach: Customers -->
        <tr>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td data-bind="text: DateOfBirth"></td>
            <td data-bind="text: Email"></td>
            <td data-bind="text: Pwd"></td>
            <td><a class="tag-open"></a></td>
        </tr>
        <!-- /ko -->
    </table>
</div>
</div>

Answer 1

我的猜测是，您看到的行为有所不同，因为页面中的某些对象是动态添加/删除的，并且您需要委托(delegate)事件处理才能自动为新添加的对象提供事件。

在您的各种示例中，有两种基本的行为类型:

行为#1:静态事件绑定(bind)

$('button').click(function () {
    console.log(this) + " - 1";
});

$('button').on('click', function () {
    console.log(this) + " - 2";
});

$body.find('button').on('click', function () {
    console.log(this) + " - 5";
});

以上三个都将点击处理程序直接附加到代码首次运行时页面中存在的每个按钮对象。这些基本上是相同的。 .click() 语法只是一个快捷方式。 $body.find('button') 在功能上等同于 $('button')，因为两者都选择正文中的所有按钮。

注意:这些事件处理程序只会附加到首次运行此代码时存在的按钮对象。随后添加到文档中的任何按钮对象都不会附加事件处理程序。

行为 #2:动态或委派事件绑定(bind)

$(document).on('click', 'button', function () {
    console.log(this) + " - 3";
});

$(document.body).on('click', 'button', function () {
    console.log(this) + " - 4";
});

这两个使用委托(delegate)事件处理来监视冒泡到文档或正文对象的点击。这些同样相似。这些将处理源自按钮标签的任何点击事件。由于事件处理程序没有直接附加到按钮对象，因此按钮可以在页面中来来去去，并且任何时候存在的所有按钮对象都将获得此处理程序行为。

通常不建议将委托(delegate)方法绑定(bind)到 document 或 body 对象。事实上，这就是 .live() 已被弃用的原因，因为它就是这样做的，并且可能会导致性能问题。问题是，如果您获得大量委托(delegate)事件都绑定(bind)到同一个对象，那么每次事件发生并且它冒泡到该对象时，jQuery 都必须将原始选择器与许多不同的选择器进行比较，以了解要使用哪个处理程序打电话。

将委托(delegate)事件绑定(bind)到尽可能接近实际目标对象的父对象要好得多，但显然您必须选择一个不会添加/删除的父对象(您需要一个不断变化的父对象)在页面中)。

在更具体的代码示例中，假设 bxRetrieveCustomer div 不是动态创建的，您应该更改此设置:

$(document).on("click", ".tag-open", function (event) {
    // DO SOMETHING
}); 

对此:

$("#bxRetrieveCustomer").on("click", ".tag-open", function (event) {
    // DO SOMETHING
}); 

这仍然是委派事件处理，但会将事件处理程序绑定(bind)得更接近实际对象，因此它会更有效地工作。

效率

至于哪一个最好，取决于:

如果您有在运行希望事件绑定(bind)到的事件绑定(bind)代码后创建的对象，那么您将需要对最近的祖先对象(不是事后动态创建的对象)使用委托(delegate)事件处理。

如果您有大量对象(即使它们是静态的)，则委托(delegate)事件处理的安装效率会更高，因为它为所有对象安装一个事件处理程序，而不是为每个单独的对象安装数千个事件处理程序。

如果您有中等或少量的静态对象，则将事件处理程序直接绑定(bind)到它们是最有效的。最初将事件处理程序绑定(bind)到每个对象会花费一点时间，但随后在事件发生时效率最高。