1

我正在处理的页面上的分页控件被有条件地绑定在超过 1 页的情况下。我不喜欢在我的项目中看到以下代码，

if (pages > 1) {
  $('.some_class').bind('event', function() {});
}

因为我觉得它代表了一种杂乱无章的编码风格。我会把它return和到处散布声明放在同一水平上，而不是使用控制。我觉得将事件绑定到全局可用对象在函数调用的本地范围内没有位置。所以我通常做的是制作两个 javascript 文件，例如：pagination.js和pagination-controls.js. 在一个中，我有关于构建 html 和显示分页控件的逻辑。在另一个我有如下陈述：

$(document).on('click', '.pagination .next', function() {});

无论页面上的任何位置是否有$('.pagination .next')元素都会触发。我喜欢这种感觉：网站有行为，它只知道 id 和类，而不知道某个本地范围内的实例变量。

编辑：这绝对是不好的做法，如下所述。然而：

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。

并且关于直接和委托事件的讨论是相关的。特别是我认为以下描述了我的用法：

通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。

编辑：所以我想现在我想知道“无条件地更喜欢绑定行为而不是基于逻辑的绑定是不是很糟糕？” 这可能只是风格问题，我原来的问题已经回答了，所以我想我会接受这个答案。

4

1 回答 1

3

是的，这会导致大量不必要的开销，这是一种“不好的做法”。

将您的事件处理绑定到顶级文档对象意味着在页面中任何位置的任何元素上发生的每一次单击document都会冒泡到该对象，在该对象中检查事件的目标以查看它是否匹配.pagination .next。

实际上，文档本身建议您不要使用：

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

所以，你在滥用on. 它用于直接绑定到元素或可能动态创建子元素的父元素，并且您应该绑定到最近的可能父元素。绑定到文档当然不是您处理页面中事件的唯一方式。

于 2013-05-30T20:09:01.553 回答