JavaScript 事件委托(delegate)代码组织

Question

我正在使用 jQuery(事件委托(delegate))将单击事件绑定(bind)到一个大容器。

我在该容器中有许多可点击的不同项目。

我正在处理的问题是，如果我有 20 个可点击项目，我需要在点击处理程序的容器中执行 if else block x 20。有没有办法让这个更清洁？例如:

attachClickEvent:function(){
    $(".container").click($.proxy(this.handleOnClick,this));
},
handleOnClick:function(event){
     var $target = $(event.target);
     if($target.closest(".widget1").length >0){
         //handle widget 1 interaction
     }else if($target.closest(".widget2").length >0){
         //handle widget 2 interaction
     }else if($target.closest(".widget3").length >0){
         //handle widget 3 interaction
     }else if($target.closest(".widget4").length >0){
         //handle widget 4 interaction
     }else if($target.closest(".widget5").length >0){
         //handle widget 5 interaction
     }
}

等等

Answer 1

首先想到的是使用循环:

var handlers = {
  "widget1": function(event, candidate){},
  "widget2": function(event, candidate){}
}

$.each(handlers, function(cssClass,handler){
  var sel = '.'+cssClass;
  var candidate = target.closest(sel);
  if(candidate.length > 0) {
    handler(event, candidate);
    break;
  }
});