Question

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

例如：

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

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

Answer 1

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

The handlers will execute in the order in which they were bound

Answer 2

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

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

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

Answer 3

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

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

来源：http://api.jquery.com/bind/

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

Answer 4

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

$('#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也说：

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

Answer 5

两个处理程序都被调用。

你可能会想到inline event binding（例如"onclick=..."），其中一个很大的缺点是只能为一个事件设置一个处理程序。

jQuery符合DOM Level 2 event registration model：

DOM事件模型允许多个事件的注册一个EventTarget上的监听器。至实现这一点，事件听众都没有更长时间存储为属性值

Answer 6

使用2种方法使其成功运行：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来测试它。

Answer 7

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

原油，也许，但绝对应该有用。

Answer 8

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

demo

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

8 个答案: