jquery多个事件处理程序

时间:2012-10-02 05:10:45

标签: javascript jquery events event-handling

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

代表。具有类名“foo”的所有元素应以特定方式响应change事件。所有类名为“bar”的元素都应以其他方式响应。

现在我的一些元素属于两个类,即class =“foo bar”,它们应该以两种方式响应。现在,只调用了一个事件处理函数。

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

2 个答案:

答案 0 :(得分:14)

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

选中此fiddle以查看多个事件被解雇

选中此fiddle以查看事件处理程序是如何被覆盖的,只会导致最后绑定的处理程序触发

答案 1 :(得分:5)

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

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

通常的实现是监听“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);
} 

此处函数句柄处理具有您选择的类的元素的所有事件。 如果您想添加其他事件或类,只需将它们附加到“打开”列表中即可。