javascript - 我正在尝试了解不显眼的 Javascript 的最佳实践。使用观察者的推荐和有效方法是什么？

Question

我正在尝试了解不显眼的 Javascript 的最佳实践。 Unobtrusive Javascript 的思想之一是 Javascript 不应直接包含在页面的 html 代码中，例如 onchange=runScript()。相反，应该创建一个观察者来在相关元素发生变化时执行代码。

我的问题是围绕观察者的最佳实践是什么。 Javascript 中的事件观察器有多少开销？

我不知道观察者在浏览器中通常是如何编码的。创建一个可以处理很多元素但必须为每次点击运行代码的单个通用观察器是否更有效，例如以下内容:

document.body.observe('click', function(event) {
  if (event.element().match('some_id')) {
    //do something
    event.stop()
  }
}

或者为每个与其非常具体匹配的相关元素创建一个单独的观察者会更有效吗，例如:

$('some_id').observe('click', function(event) {
  //do something
  event.stop()
}

或者观察者的开销如此之低以至于根本没有理由担心它，我应该只做任何更方便编码的事情？

Answer 1

虽然您在标题中写了 JavaScript，但我看到您在问题中使用了 jQuery。所以，希望以 jQuery 为中心的答案是可以的。

jQuery 包括两种方法来实现这一点，$.live() 和 $.delegate()。在处理来自大量相关元素(例如，大表的每一行)的事件时，使用事件委托(delegate)绝对是个好主意。将单个处理程序附加到表并在事件冒泡时捕获事件比将事件附加到每一行更有效。

对于单个元素(如您的 ID 示例)，事件委托(delegate)不是必需的。一个简单的 $('#some_id').click(fn) 就可以了。