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

时间:2011-07-27 13:38:06

标签: javascript jquery

我正在创建一个庞大的Web应用程序,使用基于JavaScript的UI,并且不断生成许多事件。

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

问题是,这个应用程序的设计方式是可以将一个或多个模块加载到我正在编码的主JavaScript库中(它负责控制UI和程序的其他方面)。当然,每个模块应该完全相互独立,因此您可以选择要加载的方法,而不会影响库的一般功能,只需添加或删除功能。

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

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

例如,在这个小提琴中,第一个按钮会让第一个段落触发一个事件,而它的父节点会抓住它。第二个按钮会让第二个段落触发事件,但是侦听同一事件的div将无法捕获它,因为它不会从其中一个儿子中触发。

所以我的问题是:是否可以拥有一个事件监听器,能够监听从不是它的儿子的元素触发的事件(元素放在页面的任何地方)?

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

有关更好的实现方法的任何帮助或建议吗?

1 个答案:

答案 0 :(得分:0)

jQuery为这种情况提供了一个特殊的绑定器:live()。它让所有事件都冒泡到文档中,然后相应地处理它们。但是,如果您对不同的面板使用div或其他容器等,可能使用delegate()更有意义。不要过分担心绑定元素的数量。相信我,它将运行50个绑定或10个代表,因为它将与1活。