0

.on()如果元素在 DOM 中不存在，jQuery with event 会发生什么？

例如，如果我使用这个：

$(document).on('click', "#registerFormSubmit", function(){
   // do something here
});

而且我没有#registerFormSubmit出现在所有页面上，浏览器是否被代码拖慢了，或者不是吗？

那么我为什么要这样做呢？

我不想将我的 javascript 代码拆分为 10 个 .js 文件，并根据哪个页面需要包含每个文件，因为我相信服务器/浏览器在 1 个文件中传输数据会更快（尤其是如果文件被混淆和缩小）。

如果代码甚至会减慢不包含该元素的页面的速度，那么将所有代码保存在一个文件中是否是一个很好的解决方案？

var page = window.location.pathname.split('/');
if (page[1] == 'contact'){
   $(document).on('click', "#registerFormSubmit", function(){
      // do something here
   });
}

请记住，该事件为 DOM 中或将来将在 DOM 中的.on()任何元素附加一个事件处理函数。因此，我相信即使该元素目前不存在，它也会减慢浏览器的速度。

但是，if (page)如果页面不匹配，则建议的解决方案不应附加事件，imo。

任何人都可以对此有所了解吗？

4

1 回答 1

0

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery 必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请将委托事件附加到尽可能靠近目标元素的文档位置。避免在大型文档上过度使用document或document.body用于委托事件。

tag#id.classjQuery在用于过滤委托事件时可以非常快速地处理表单的简单选择器。所以, "#myForm","a.external"和"button"都是快速选择器。使用更复杂选择器（尤其是分层选择器）的委托事件可能会慢几倍——尽管对于大多数应用程序来说它们仍然足够快。通常可以通过将处理程序附加到文档中更合适的点来避免分层选择器。例如，而不是$("body").on("click", "#commentForm .addNew", addComment)使用$("#commentForm").on("click", ".addNew", addComment).

来源：http ://api.jquery.com/on/

我建议您使用上述格式而不是$(document).on('click', "#registerFormSubmit")如果您不打算在所有页面中使用点击事件，那么简单的答案是不要将它放在所有.js文件中。仅加载所需的.js文件并在单独的文件中处理registerFormSubmit单击事件.js。

于 2013-09-15T19:13:25.133 回答