jQuery：同一事件有多个处理程序

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

例如：

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

最后一个处理程序是“胜利”，还是两个处理程序都将运行？

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

处理程序将按照绑定的顺序执行。

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

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

这样，（从jQuery的角度来看）只有一个处理程序，该处理程序以指定的顺序调用f和g。

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

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

资料来源：http：//api.jquery.com/bind/

因为jQuery的其他功能（例如.click()）是的快捷方式.bind('click', handler)，所以我想它们也会按照绑定的顺序触发。

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

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

来源：http : //www.peachpit.com/articles/article.aspx?p= 1371947& seqNum=3

TFM还说：

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

两个处理程序都被调用。

您可能会想到内联事件绑定（例如"onclick=..."），其中最大的缺点是只能为一个事件设置一个处理程序。

jQuery符合DOM Level 2事件注册模型：

DOM事件模型允许在单个EventTarget上注册多个事件侦听器。为此，事件侦听器不再存储为属性值

使用以下两种方法使其成功工作：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对其进行了测试。

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

也许是粗略的，但绝对可以。

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

演示