有没有办法将jQuery的委托事件处理程序签名与多个委托目标一起使用？

Question

我非常喜欢使用jQuery的委托事件处理签名:

$('.container').on('click', '.button', function () {
  // do something
});

我也非常喜欢使用多事件处理程序签名:

$('.container').on({
  click: function () {
    // do something
  },
  mouseover: function () {
    // do something else
  }
});

我在想是否有办法把这两者结合起来。我希望能够处理同一根元素的多个不同的后代上的点击事件。

我的第一个猜测是我可以向处理程序函数传递第二个参数，但是检查arguments变量显示除了事件对象之外没有其他数据传入。

是否有一种设计模式来适应这种情况，或者我必须咬紧牙关继续这样做?

$('.container')
    .on('click', '.button-a', function () {
      // do something
    })
    .on('click', '.button-b', function () {
      // do another thing
    })
    .on('click', '.button-c', function () {
      // do yet another thing
    });

Answer 1

在这种情况下，您可以使用,分隔。

:

$('.container')
  .on('click', '.button-a, .button-b, .button-c', function () {
      // do something
  });

但这是因为你使用的是同一个事件。

如果你想合并多个事件签名，你可以这样做:

$('.container .button-a, .container .button-b, .container .button-c').on({
  click: function () {
    // do something
  },
  mouseover: function () {
    // do something else
  }
});

Answer 2

我将使用事件对象来检查被点击的元素。

并根据被点击的元素执行代码块。

$('.container').on('click', function(e) {
     var $target = $(e.target);
    if($target.hasClass('button-a')) {
        // do something
    } else if($target.hasClass('button-b')) {
        // do another thing
    } else if($target.hasClass('button-c')) {
         // do yet another thing
    }
});

Answer 3

一旦你进入了委托回调函数，你就可以使用属性type来检测触发的事件类型，然后你可以观察id或className来检测元素的id或类。还要记住，您可以向将要接收事件的选择器添加多个类或id，也可以添加多个事件。我的理解是，您的容器是DOM树中接收事件的最上层元素。您可以从firebug或chrome web inspector中将下面的代码复制粘贴到控制台。然后点击这个网页的顶部导航。你会看到发生了什么，如果不是，你已经知道了!另外请注意，如果您单击每个li元素的空白(margin-right:7px space)，您将触发所有这些按钮的类容器(.nav) (Questions | Tags…| )没有得到回答。

   $('.container').on('focusout click', ".nav" , function (e) {
    //attached to prevent the stackoverflow itself events attached to this elements
    e.preventDefault();
    e.stopPropagation();
    var className = e.target.className;
    var id = e.target.id;
    if ( e.type === 'click'){
        if ( id === 'nav-questions') {
            // do something
            console.log('clicked: from ' + id + 'n' );
        }
        if ( className=== 'nav mainnavs'){
            // do something
            console.log('clicked: from ' + className + 'n');
        }
        else {
            var selector = id || className;
            console.log('clicked: from ' + selector + 'n');
        }
    }
    if ( e.type === 'focusout'){
        console.log('focusout from ' + id);
    }
});