JavaScript事件处理程序顺序

Question

我有一个输入框，它有两个事件处理程序绑定在上面。

验证 & 自动保存

显然，在保存之前我想进行验证。如果验证失败，将会向输入框添加“invalid”类，autosave将在继续之前检查该类。

这样已经足够好了，但是否有一种方式可以保证在所有情况下都先运行验证，然后再自动保存呢？

- Justin Alexander

Answer 1

如果您使用JQuery来绑定事件，它会保证处理程序按照绑定的顺序触发。否则，顺序将正式未定义。

如果您无法使用JQuery或类似框架，可以通过使用自己的自定义事件绑定轻松模拟此功能，其中通用处理程序是一个函数，它保持函数数组并按顺序调用它们。

- Mr. Shiny and New 安宇

---

一个例子会是个很好的答案。 - Jaydeep Shil

Answer 2

通常情况下，您需要让保存事件处理程序调用Validate()函数，如果一切正常且准备好进行保存，则该函数将返回true。

function onSaved() {
  if (!validate()) {
    // set class
    return;
  }

  // do the save
}

- JacobE

Answer 3

为什么不只附加一个处理程序 -- Validate -- 并从其中调用AutoSave？

想要一个不是问题的答案，请参考这篇文章或者这篇或者这篇。

- Wayne

---

因为它们代表着可能会同时出现也可能不会同时出现的独立模块。将它们写成单个函数（这是显而易见的）会导致代码过度耦合。 - Justin Alexander

我不同意。它们是相互耦合的，因为你希望在另一个运行之后仅执行一个。将它们放在一个函数中并不会“创造”这种耦合。它只是承认了这一点。（其次，仅仅因为你在某个函数中同时调用它们，并不意味着它们必须始终以这种方式被调用。它们仍然可以以保持独立性的方式编写。） - Wayne

我知道这是很久以前的事了，但是为了补充一下，你可以将 Validate 重命名为 ValidateAndAutoSave，以更好地暗示它的预期用途，因为看起来验证暗示着自动保存，但是自动保存可以独立进行而没有暗示的关联。 - Austin Schmidt

Answer 4

已经有答案了，但是需要补充一点知识，事件处理程序的顺序不能被依赖。在任何给定的实现中，它可能是可预测的，但这可以从一个（Javascript）实现到另一个实现和/或随时间变化而改变。唯一确定的是它们都会被执行，但不确定执行顺序。

请注意，当DOM对象有一个事件处理程序，而同一个事件还有一个子元素或父元素的事件处理程序时，哪个会先执行并不总是清楚的。详见http://www.quirksmode.org/js/events_order.html

- Mörre