5

我尝试使用具有丰富功能的 jquery 创建自定义小部件，因此我需要针对许多标准事件（例如 dblclick、click、focus、blur 等）的自定义处理程序。

我可以应用以下两种策略之一：

  1. 全局使用$(document).on('click', '.widget-name .element-class', handle_click);
    一次，其中 handle_click 是处理函数

  2. $(widget-element).find('.element-class').on('click', handle_click)
    在创建每个小部件实例期间使用

  3. 像这样绑定到封闭元素：

    $(this.element)._on('click', function(event){
    var $this = $(this);
    if($this.is('.element-class')){ handle_click(this, event); }
    else if($this.is(...)){...}
    ...
    });

哪种方法更好的设计？
我一般都知道“这取决于”，所以让我添加一些约束：

一种。小部件通常由约 100 个 DOM 元素组成，并专门处理不同的事件。
湾。小部件通常不会被销毁并再次创建，只是有时会隐藏。
C。通常会加载 1-3 个小部件实例。
d。元素将根据用户请求动态添加，但同时仅<10
e。在小部件中启用了拖放操作，这可能涉及同时重新定位大约 20 个 DOM 元素。
F。小部件本身通常不可拖动。

由于定义了许多单独的事件处理程序，方法 2 是否存在显着的性能（或显着的内存）损失？（是的，这可能取决于我知道的浏览器实现。）

4

2 回答 2

3

使用第一种形式是实现事件处理程序一次的简单方法，但它有额外的开销。每次单击文档时都会调用处理程序，然后 jQuery 必须检查目标是否与选择器匹配；对于第二种形式，浏览器仅在您单击它所绑定的特定元素时才调用处理程序。

第一种形式也可能以一种微妙的方式失败。如果有封闭元素有自己的点击处理程序，并且它们使用event.stopPropagation()，这将防止事件冒泡到document，因此.on()永远不会调用处理程序。

常规应用程序开发人员可以通过将事件绑定到包含他们想要委托给的动态元素的最深层嵌套元素来缓解这两个问题。但是小部件开发人员对上下文的了解不多，因此它可能必须document像在您的代码中那样使用广泛的范围。如果您可以实现第二种形式，在向 DOM 添加元素时添加处理程序，那可能会更好。

您可以轻松做到这一点的一种方法是使用 jQuery 的.clone()方法。它接受一个可选参数，指示是否应复制处理程序。所以创建一个带有处理程序绑定的原型元素，然后克隆它，新元素也将具有处理程序。

于 2013-07-26T14:31:34.823 回答
-3

好吧，如果您有多个事件，我建议您这样做：

$(document).on({
    click: clickFn,
    dblclick: dblFn,
    mouseover: mouseFn,
    ...
}, '.widget-name .element-class');

但要回答你的问题：

  1. 这完全取决于您是想要事件委托还是将事件直接附加到页面上的对象
  2. 我不确定
于 2013-07-26T14:24:45.427 回答