JavaScript事件代理组织代码

Question

我使用jquery（事件代理）将一个单击事件绑定到一个大容器。

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

我正在处理的问题是，如果我有20个可点击的项目，我需要在点击处理程序的容器上做一个if else块x 20。有没有办法让这个更清洁？ E.g：

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; 
    } 
}); 

Answer 2

HTML

<div class="container"> 
<div id="cont1"></div> 
<div id="cont2"></div> 
<div id="cont3"></div> 
<div id="cont4"></div> 
<div id="cont5"></div> 
<div id="cont6"></div> 
. 
. 
. 

</div> 

jQuery的

$(".container").find("div").click(function(){ 
id = $(this).attr("id"); 
if(id=="cont1"){ 
... 
} 
else if(id=="cont2"){ 
.. 
} 
.. 
else{ 
.. 
} 
}); 

Answer 3

这也许就是你正在寻找的东西。有很多不同的方式来做到这一点。

<div id="widgetcontainer"> 
    <div id="widget1">A</div> 
    <div id="widget2">B</div> 
    <div id="widget3">C</div> 
    <div id="widget4">D</div> 
    <div id="widget5">E</div> 
</div> 

这里是JS

想到的是使用循环

function someAction() { 
    alert("Hey"); 
} 


$(function() { 
    var wc = $("#widgetcontainer div"); 
    for (var i = 0; i < wc.length; i++) { 
     $(wc[i]).click(function() { 
      someAction(); 
     }); 
    } 
}); 

Answer 4

如何使用delegate？

$(".container"). 
    delegate(".widget1", "click", widget_1_handler). 
    delegate(".widget2", "click", widget_2_handler) 
; 

Answer 5

创建的对象与功能

有点晚于这个游戏，但你应该考虑举办这样的代码。

如果您的窗口小部件有20个独特的操作，那么您将使用所有代码。尝试通过创建函数来重用通用代码。作出这样的结构：

var actions = { 
    'widget1' : function(event) { 
     // handle widget 1 interaction 
    }, 
    'widget2' : function(event) { 
     // handle widget 2 interaction 
    }, 
    'widget3' : function(event) { 
     // handle widget 3 interaction 
    }, 
    call : function(event) { 
     var prefix = "widget", 
      widget = $(event.target).closest('[class^="'+prefix+'"]'), 
      classN; 
     if(widget.length) { 
      classN = widget.attr('class').replace(new RegExp('.*('+prefix+'\\d*).*$'), '$1'); 
      if(classN in this) { 
       this[classN](event); 
      } 
     } 
    } 
}; 

简体执行

然后，从你的点击处理程序，只需调用该函数是这样的：

handleOnClick : function(event) { 
    actions.call(event) 
} 

Answer 6

jQuery提供这一功能的开箱：

$('.container').on('click', '.widget1', function() { 
    // handle widget 1 interaction 
}); 

$('.container').on('click', '.widget2', function() { 
    // handle widget 2 interaction 
}); 

我最近写了一个库来提取，如果你不使用jQuery。这就是所谓的鳄鱼。你可以看到在示例/文档： http://craig.is/riding/gators

你可以做这样的事情

Gator(container_element).on('click', '.widget1', function() { 
    // handle widget 1 interaction 
}); 

Gator(container_element).on('click', '.widget2', function() { 
    // handle widget 2 interaction 
}); 

两个jQuery和鳄鱼只能绑定一个单一的点击事件容器元素和处理内部调度的事件。