加载后附加事件

Question

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

开发人员在选择在容器上委派事件或在加载后附加事件时应考虑哪些因素？

我问这个是因为我从来不知道使用哪种方法。我通常在加载后附加事件，因为我可以使用来自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 ...
    });
}

委派活动

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个事件，只记录一个事件，并在事件触发时评估事件目标。

此外，委派可以帮助您避免重复运行代码。说你有：

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

您每次加载内容时都会注册该事件，而委派意味着它只能运行一次。

什么时候不委托？好吧，如果您的事件绑定代码是实质性的或重量级的，以至于您可能希望推迟执行，那么在内容加载之前有一个参数要这样做。这样就可以错开页面的负载重量。

简而言之，除了特殊情况外，我建议代表团。

在Ajax加载与委托事件之后附加事件：要考虑哪些因素？

加载后附加事件

委派活动

1 个答案: