<分区>
我尝试使用具有丰富功能的 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)
在创建每个小部件实例期间像这样绑定(bind)到封闭元素:
$(this.element)._on('点击', 函数(事件){
var $this = $(this);
if($this.is('.element-class')){ handle_click(this, event);
否则如果($this.is(...)){...}
...
});
哪种方法是更好的设计？
我知道一般来说“这取决于”，所以让我添加一些限制条件:
一个。该小部件通常由约 100 个 DOM 元素组成，这些元素具有专门处理的不同事件。
b.小部件通常不会被销毁并再次创建，只是有时会隐藏起来。
C。通常会加载 1-3 个小部件实例。
d.元素将根据用户请求动态添加，但同时只能<10个
e.在小部件中启用了拖放功能，可能涉及同时重新定位约 20 多个 DOM 元素。
F。小部件本身通常不可拖动。
由于定义了许多单独的事件处理程序，方法 2 是否有显着的性能(或大量内存)损失？(是的，这可能取决于我所知道的浏览器实现。)