全局与本地事件处理程序绑定jQuery小部件 [英] Global vs. local event handler binding for jQuery widget
问题描述
我尝试创建一个具有丰富功能的jQuery的自定义小部件，因此我需要许多标准事件的自定义处理程序，例如dblclick，click，focus，blur等。
I try to create a custom widget with jquery with rich functionality, therefore I need custom handlers for many standard events such as dblclick, click, focus, blur etc.
我可以应用以下两种策略之一：
I can apply one of two strategies:
-
使用
$（document）.on（'click '，'.widget-name .element-class'，handle_click）;
一次全局其中handle_click是处理函数
Use
$(document).on('click', '.widget-name .element-class', handle_click);
once globally where handle_click is the handler function
使用 $（widget-element）.find（'。element-class'）。on（'click'，handle_click）
在创建每个小部件实例
Use $(widget-element).find('.element-class').on('click', handle_click)
during the creation of each widget instance
绑定到这样的封闭元素：
Bind to the enclosing element like this:
$（this.element）._ on（'click'，function（event）{
var $ this = $（this）;
if（$ this.is（'元素类'））{handle_click（this，event）;}
else if（$ this.is（...））{...}
...
}）;
$(this.element)._on('click', function(event){
var $this = $(this);
if($this.is('.element-class')){ handle_click(this, event);}
else if($this.is(...)){...}
...
});
哪种方法更好的设计？
我知道取决于ge所以让我添加一些约束：
Which approach is better design?
I know "it depends" in general, so let me add some constraints:
a。该小部件通常由〜100个DOM元素组成，特别处理不同的事件。
b。该小部件通常不会被销毁并重新创建，只能有时隐藏。
c。通常将加载小部件的1-3个实例。
d。元素将根据用户请求动态添加，但在同一时间只有< 10>
e。在widget中启用drag-n-drop功能，可能需要同时重新定位〜20s的DOM元素。
f。小部件本身通常不可拖动。
a. the widget will typically consist of ~100 DOM elements with different events handled specially.
b. the widget will typically not be destroyed and created again, only hid sometimes.
c. typically 1-3 instances of the widget will be loaded.
d. elements will be added dynamically upon user request but only <10 at the same time
e. drag-n-drop is enabled within the widget that may involve repositioning ~20s of DOM elements at the same time.
f. the widget itself is typically not draggable.
由于定义了许多单独的事件处理程序，方法2是否存在实质性的表现（或大量内存）罚款？（是的，这可能会依赖在我知道的浏览器实现上。）
Is there a substantial performance (or substantial memory) penalty on approach 2 due to defining many separate event handlers? (Yes, that could depend on browser implementations I know.)
推荐答案
使用第一个表单是一个简单的方法来实现事件处理程序一次，额外的开销。处理程序实际上是为文档中的每次点击调用的，jQuery然后必须检查目标是否匹配选择器;使用第二种形式，浏览器只有在您点击绑定的特定元素时才会调用处理程序。
Using the first form is an easy way to implement the event handler once, but it has extra overhead. The handler is actually invoked for every click on the document, jQuery then has to check whether the target matches the selector; with the second form, the browser only invokes the handler when you click on the specific elements that it's bound to.
第一种形式也可能以微妙的方式失败。如果有包含自己的点击处理程序的附加元素，并且使用 event.stopPropagation（），这将阻止事件冒泡到文件，所以不会调用 .on（）处理程序。
The first form can also fail in a subtle way. If there are enclosing elements that have their own click handlers, and they use event.stopPropagation(), this will prevent the event from bubbling up to the document, so the .on() handler will never be invoked.
应用程序开发人员可以通过将事件绑定到包含要委托的动态元素的最深入的嵌套元素来减轻这两个问题。但是小部件开发人员没有上下文的知识，所以可能必须在代码中使用广泛的文档范围。如果您可以实现第二种形式，则在向DOM添加元素时添加处理程序，这可能会更好。
Regular application developers can mitigate both problems by binding the event to the most deeply nested elements that enclose the dynamic elements they want to delegate to. But a widget developer doesn't have as much knowledge of the context, so it may have to use the wide document scope as in your code. If you can implement the second form, adding the handlers as you add elements to the DOM, that's likely to be better.
您可以轻松地执行此操作是通过使用jQuery的 .clone（）方法。它需要一个可选参数，指示是否应该复制处理程序。所以创建一个原型元素与处理器绑定，然后克隆它，新的元素也将有处理程序。
One way you may be able to do this easily is by using jQuery's .clone() method. It takes an optional argument indicating whether handlers should be copied. So create a prototype element with the handler bound, then clone it and the new element will also have the handler.
这篇关于全局与本地事件处理程序绑定jQuery小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
