jquery 多个事件处理程序答案

【问题标题】：jquery multiple event handlersjquery 多个事件处理程序
【发布时间】：2014-05-21 03:06:15
【问题描述】：

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

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

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

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

【问题讨论】：

简答，你不能。一个将在另一个之前执行。不可能同时进行，但是，两者都应该按照它们被提出的顺序执行。你能给我们一些代码来看看吗？
你不能同时执行这两个事件"simultaneously"。顺便说一句，这些events 是什么，不知何故也取决于事件

标签： javascript jquery events event-handling

【解决方案1】：

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

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

检查此fiddle 以查看事件处理程序是如何被覆盖的，从而导致仅最后绑定的处理程序触发

【讨论】：

【解决方案2】：

你想要的是一种“行为”模式的变体。

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

通常的实现是监听“document”上的事件，然后通过event.target，定义动作。

例如：fiddle(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”列表中即可。

【讨论】：