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

我会使用事件Object来检查被点击的元素。

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

$('.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 2

在这种情况下，您可以用“，”分隔。

像这样：

 $('.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 3

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

   $('.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);
    }
});

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

3 个答案: