javascript - 如何使用委托(delegate)事件、 namespace 和附加多个事件处理程序

Question

JSfiddle jsfiddle

我想使用 event delegation 这个概念在每个命名空间事件上。 Appernetly 它比 .big-ul li 更优化。不幸的是，在使用命名空间或尝试使用普通对象同时附加多个事件处理程序时，我找不到合适的语法来使其工作？

$(".big-ul").on({
  "click.namespace", "li": function(event){
    $(this).toggleClass("active");
  },
  "mouseenter.namespace" , "li": function(event){
    $(this).addClass("inside");
  },
  "mouseleave.namespace", "li": function(event){
    $(this).removeClass("inside");
  }
});

来自 jquery 站点的事件委托(delegate)示例

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

Answer 1

您不能像那样将多个事件附加到多个函数。您可以做的是对包含所有需要的信息的对象使用 each 函数。您甚至可以将命名空间名称(哈哈)存储在一个单独的变量中:

Example on jsFiddle

var $root = $(".big-ul");
var namespace = 'namespace';
var events = [
    {
        event: "click"+"."+namespace, 
        delegate: "li",
        fn: function(event){
            $(this).toggleClass("active");
        }
    },
    {
        event: "mouseenter"+"."+namespace, 
        delegate: "li",
        fn: function(event){
            $(this).addClass("inside");
        }
    },
    {
        event: "mouseleave"+"."+namespace, 
        delegate: "li",
        fn: function(event){
            $(this).removeClass("inside");
        }
    }
]

for(i=0;i<events.length;i++){
    $root.on(events[i].event, events[i].delegate, events[i].fn);  
}

与公认方案相比的优势:

1. 这是一个更加灵活的解决方案，因为您可以跨模块发送 events 对象，或者在您始终使用相同的 event 时使用一个函数动态绑定(bind)事件 -对象结构。
2. 您可以从一个根对象委托(delegate)给不同的子节点，而不仅仅是一个。

示例:

/* events array*/
var events = [
    {
        root: "root-query-string",
        event: "eventname",
        delegate: "delegate-query-string",
        fn: function
    }
]

/* dynamic batch bind function */
function batchBind(events) {
    for(i=0; i<events.length; i++){
        $(el.root).on(events[i].event, events[i].delegate, events[i].fn);  
    }
}