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

Question

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

例如:

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

最后一个处理程序是"win",还是两个处理程序都会运行？

Answer 1

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

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

Answer 2

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

$("...").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还说:

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