Question

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

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

使用$(document).on('click', '.widget-name .element-class', handle_click);
一次全局，其中handle_click是处理函数
使用$(widget-element).find('.element-class').on('click', handle_click)
在创建每个窗口小部件实例期间
绑定到这样的封闭元素：

$（this.element）._ on（'click'，function（event）{
var $ this = $（this）;
if（$ this.is（'。element-class'））{handle_click（this，event）;}
否则如果（$ this.is（...））{...}
...
}）;

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

一个。小部件通常由~100个DOM元素组成，特殊处理不同的事件湾小部件通常不会被销毁并再次创建，有时只会隐藏 C。通常会加载1-3个小部件实例 d。元素将根据用户请求动态添加，但同时仅<10 即在窗口小部件中启用了drag-n-drop，可能涉及同时重新定位~20s的DOM元素 F。小部件本身通常不可拖动。

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

Answer 1

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

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

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

您可以通过使用jQuery的.clone()方法轻松完成此操作。它需要一个可选参数来指示是否应该复制处理程序。因此，创建一个带有处理程序绑定的原型元素，然后克隆它，新元素也将具有处理程序。

Answer 2

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

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

但要回答你的问题：

这完全取决于您是否需要事件委托，或者是否将事件直接附加到页面上的对象
我不确定

jQuery小部件的全局与本地事件处理程序绑定

2 个答案: