javascript - Ajax 加载后附加事件与委托(delegate)事件 : what factors to consider?

Question

请考虑以下场景:我们使用带有一堆按钮的 Ajax 加载一些 HTML 页面。我们需要在加载后将事件附加到这些按钮。

开发人员在选择在容器上委托(delegate)事件还是在加载后附加事件时应考虑哪些因素？

我问这个是因为我不知道该使用哪种方法。我通常在加载后附加事件，因为我可以使用来自 Ajax 响应的额外数据。但性能方面哪种方法更好？每种方法的性能是否有众所周知的优缺点？

例子:

加载后附加事件

var $cont = $(".container");

$.get("test.html", function(data) {
  $cont.html(data);     
  initEvents(); // normally I use this because I can use/pass extra data from response
});

var initEvents = function() {
    $cont.find('.my-button').click(function() {
        // ... magic ...
    });
    $cont.find('.my-other-button').click(function() {
        // ... magic ...
    });
}

委托(delegate)事件

var $cont = $(".container");   

$.get("test.html", function(data) {
  $cont.html(data);
});

$cont.on("click", ".my-button", function() {
  // ... magic ...
});

$cont.on("click", ".my-other-button", function() {
  // ... magic ...
});

Answer 1

问题不一定非黑即白。

在某种程度上，这取决于偏好和意见。我通常赞成委派事件，因为这意味着，当内容被加载时——而且至关重要的是，稍后重新加载，可能是过滤器的结果——事件的东西已经处于事件状态。很干净。

委派通常也意味着浏览器的工作量更轻。不是附加 100 个事件，而是只记录一个事件，并在事件触发时评估事件目标。

此外，委托(delegate)可以帮助您避免重复运行代码。假设你有:

$.get('some_script.php').done(function() {
    $('.foo').on('click', function() { ... });
});

您每次加载内容时都在注册事件，而委托(delegate)意味着它可能只运行一次。

什么时候不委托(delegate)？好吧，如果您的事件绑定(bind)代码很重要或很重，以至于您可能希望推迟它的执行，那么有理由这样做直到内容加载完毕。这样您就可以错开页面的加载重量。

简而言之，在除特殊情况外的所有情况下，我都会建议授权。