jquery 多个事件处理程序

Question

我已经在我正在处理的最新项目中根据它们的类名定义了事件处理程序。

例如，所有类名为"foo"的元素都应该在更改事件上以特定的方式响应。 并且所有类名为"bar"的元素都应该以其他方式响应。

现在我的一些元素属于这两个类，即.class="foo bar"，它们应该以两种方式响应。目前，只调用了一个事件处理程序函数。

如何使两个响应同时执行。

Answer 1

这取决于您如何绑定事件。如果您通过 jQuery 绑定它们而不是通过 x.onchange = function() { ... } 覆盖处理程序 - 所有绑定的事件处理程序都将被执行。这是因为 jQuery 对事件处理程序进行排队，而不是覆盖以前的绑定。

查看此fiddle以查看触发的多个事件：
和

检查此fiddle以查看如何覆盖事件处理程序，导致仅触发最后一个绑定处理程序

Answer 2

你想要的是"行为"模式的变体。

它允许您自动处理具有给定类或其他属性的元素上的事件。

通常的实现是侦听"document"上的事件，然后通过event.target定义操作。

例如：小提琴（http://jsfiddle.net/PRkAr/）

$(document).on('click change', '.foo.bar', function(e) {
  var classes = this.className.split(/s+/);
  $.each(classes, function(i, cls) {
    handle(e, this, cls);
  })
})
function handle(e, elem, cls) { 
  // example: Event type click on elem DIV with class foo
  alert("Event type " + e.type + " on elem " + elem.tagName + " with class " + cls);
} 

这里的函数句柄，使用您选择的类处理元素上的所有事件。如果您希望添加其他事件或类，只需将它们附加到"on"列表中即可。