为页面中任何元素生成的自定义事件提供单个事件侦听器

Question

我正在创建一个巨大的 Web 应用程序，它具有基于 JavaScript 的 UI，并且不断生成许多事件。

为了避免由于需要大量事件侦听器而导致性能不佳，我当然选择使用单个事件侦听器来捕获从子元素生成的所有事件（事件冒泡）。

问题是，这个应用程序的设计方式是可以将一个或多个模块加载到我正在编写的主要 JavaScript 库中（它负责控制 UI 和程序的所有其他方面）。当然每个模块应该是完全独立的，所以你可以选择加载哪些方法，而不影响库的一般功能，只添加或删除功能。

由于每个模块都可以在不同的 DOM 元素中运行，我需要为每个模块至少有一个事件监听器，因为两个模块可以监听由放置在不同 DOM 分支中的 html 元素生成的事件。

http://jsfiddle.net/YRejF/2/

例如，在这个小提琴中，第一个按钮会让第一段触发一个事件，它的父级会捕获它。第二个按钮将让第二段触发事件，但侦听同一事件的 div 不会捕获它，因为它不是从它的儿子之一触发的。

所以我的问题是：是否有可能有一个事件侦听器，也可以侦听由不是其子元素（放置在页面上的任何地方的元素）触发的事件？

我在考虑有一个 js 对象或 dom 节点，它存储触发事件的元素的数据，以及事件本身，然后将在全局事件侦听器上触发一个通用事件（无论在哪里它被放置在 dom 中），然后它将读取数据以发现哪个元素生成了哪个事件，并采取相应的行动。

关于实现这一目标的更好方法的任何帮助或建议？

Answer 1

对于这种情况，jQuery 有一个特殊的绑定器：live()。它让所有事件冒泡到文档中，然后相应地处理它们。但是，如果您将 div 或其他容器用于不同的面板等，则使用 delegate() 可能更有意义。不要太担心绑定元素的数量。相信我，它会在 50 个绑定或 10 个代表的情况下运行，就像在 1 个 live 情况下一样。