Javascript jQuery:同一事件的多个处理程序

如果将两个事件处理程序绑定到同一元素的同一事件，会发生什么情况

例如：

var elem = $("...")
elem.click(...);
elem.click(...);

---

最后一个处理程序是“赢”了，还是两个处理程序都会运行？

两个处理程序都会被调用

您可能会想到（例如

“onclick=…”

），其中一个很大的缺点是一个事件只能设置一个处理程序

jQuery符合以下条件：

DOM事件模型允许 多项活动的登记 单个EventTarget上的侦听器。到 要实现这一点，事件侦听器是不可能的 不再存储为属性值

---

两个处理程序都将运行，jQuery事件模型允许在一个元素上有多个处理程序，因此后面的处理程序不会覆盖旧的处理程序

---

.

假设您有两个处理程序f和g，并希望确保它们以已知的固定顺序执行，然后只封装它们：

$("...").click(function(event){
  f(event);
  g(event);
});

---

通过这种方式（从jQuery的角度来看），只有一个处理程序按照指定的顺序调用f和g。

您应该能够使用链接按顺序执行事件，例如：

$('#target')
  .bind('click',function(event) {
    alert('Hello!');
  })
  .bind('click',function(event) {
    alert('Hello again!');
  })
  .bind('click',function(event) {
    alert('Hello yet again!');
  });

我猜下面的代码也在做同样的事情

$('#target')
      .click(function(event) {
        alert('Hello!');
      })
      .click(function(event) {
        alert('Hello again!');
      })
      .click(function(event) {
        alert('Hello yet again!');
      });

资料来源：

还说：

当事件到达元素时，绑定到该事件的所有处理程序 激发元素的类型。如果有多个处理程序 注册后，它们将始终按照注册顺序执行 跳跃执行所有处理程序后，事件将沿着 正常事件传播路径

---

有一种解决方法可以保证一个处理程序一个接一个地发生：将第二个处理程序附加到包含元素，然后让事件冒泡。在附加到容器的处理程序中，您可以查看event.target并在您感兴趣的情况下执行某些操作

---

可能是粗糙的，但它肯定会工作。

使用两种方法成功地工作：Stephan202的封装和多事件侦听器。我有3个搜索选项卡，让我们在一个数组中定义它们的输入文本id：

var ids = new Array("searchtab1", "searchtab2", "searchtab3");

当searchtab1的内容更改时，我想更新searchtab2和searchtab3。以这种方式进行封装：

for (var i in ids) {
    $("#" + ids[i]).change(function() {
        for (var j in ids) {
            if (this != ids[j]) {
                $("#" + ids[j]).val($(this).val());
            }
        }
    });
}

多个事件侦听器：

for (var i in ids) {
    for (var j in ids) {
        if (ids[i] != ids[j]) {
            $("#" + ids[i]).change(function() {
                $("#" + ids[j]).val($(this).val());
            });
        }
    }
}

我喜欢这两种方法，但是程序员选择了封装，但是多个事件侦听器也可以工作。我们使用Chrome对其进行了测试。

jQuery的.bind（）按绑定顺序激发：

当事件到达元素时，绑定到该事件的所有处理程序 激发元素的类型。如果有多个处理程序 注册后，它们将始终按照注册顺序执行 跳跃执行所有处理程序后，事件将沿着 正常事件传播路径

资料来源：

---

由于jQuery的其他函数（例如

.click（）

）是

.bind（'click'，handler）

的快捷方式，我猜它们也会按绑定顺序触发。

jQuery将同时执行这两个处理程序，因为它允许多个事件处理程序。 我已经创建了示例代码。你可以试试

---

@Rich：顺序还没有正式定义。+1，函数内部的封装是一条出路。甚至更好的条件逻辑可以包含在处理程序函数中，以控制触发的事件。一组处理程序，其顺序是通过编程确定的。该代码和该文章都没有定义处理程序的执行顺序。是的，这是事件绑定发生的顺序，但是事件处理程序被调用的顺序仍然没有正式定义。ehh？“现在当点击事件发生时，将调用第一个事件处理程序，然后是第二个，然后是第三个。”这是不清楚的吗？是的，我知道官方REC没有定义这一点，PPK已经证明事件执行是随机的，但也许jQuery已经修复了这个^^ah，错过了那句话。事实上，作者的信息是错误的。jQuery尚未“修复”此问题。因为规范没有正式定义顺序，从技术上讲，没有什么需要修正的。@CrescentFresh：很抱歉这么晚才回复，我刚刚看到了这个问题，但我想让你指出，这是jQuery的官方文档，它清楚地说，

当一个事件到达一个元素时，为元素绑定到该事件类型的所有处理程序都将被激发。如果注册了多个处理程序，它们将始终按照绑定顺序执行。执行所有处理程序后，事件将沿着正常的事件传播路径继续。

本机方式会发生什么？本机如何知道如何删除特定的事件处理程序？根据DOM级别3（参考HTML5规范），事件处理程序是按照注册顺序执行的-和。事件处理程序可以通过传递对已删除的处理程序的引用来删除registered@RussCam如果同一个处理程序被绑定多次，那么只需说

jQuery（'.btn'）。on（'click'，handlerClick）

在不同的位置被调用，而实际上没有

.off

it anywher？请注意，对于jQueryUI widgetfactory小部件，如果将处理程序设置为选项，则情况并非如此。对于要调用的新旧处理程序，您需要使用

bind

方法。有关详细信息，请参阅：@MichaelScheper可以自由编辑答案并使用其他信息进行更新