Javascript 事件处理程序顺序答案

【问题标题】：Javascript event handler orderJavascript 事件处理程序顺序
【发布时间】：2011-02-28 15:16:55
【问题描述】：

我有一个输入字段，其中绑定了两个事件处理程序。

验证和自动保存

显然我想在保存之前进行验证。如果验证失败，则将“无效”类添加到输入中，并且自动保存将在继续之前检查该类。

这很好用，但是有没有办法保证在所有情况下都在自动保存之前运行验证？

【问题讨论】：

【解决方案1】：

如果您使用 JQuery 来绑定您的事件，它可以保证处理程序的触发顺序与它们被绑定的顺序相同。否则顺序是官方未定义的。

如果您不能使用 JQuery 或类似的框架，您可以通过使用您自己的自定义偶数绑定轻松地模拟这一点，其中您的通用处理程序是一个函数，它保留一组函数并按顺序调用它们。

【讨论】：

【解决方案2】：

通常，您会调用 Save 事件处理程序 Validate()，如果一切正常并准备好保存，它将返回 true。

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

  // do the save
}

【讨论】：

【解决方案3】：

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

如果您的问题不是问题的答案，请参阅this post 或this one 或this one。

【讨论】：

因为它们代表单独的模块，它们可能会或可能不会一起出现。将它们写成单个函数（这很明显）具有过度耦合代码的效果。
我不同意。它们是耦合的，这一点可以从您希望一个仅在另一个运行之后发生的事实中得到证明。将它们放在一个函数中不会创建这种耦合。它承认它。（其次，仅仅因为您在某个函数中同时调用它们并不意味着它们必须总是以这种方式调用。它们仍然可以以保持其独立性的方式编写。）
我知道这已经是很久以前的事了，但要补充一点，您可以将 Validate 重命名为 ValidateAndAutoSave 以更好地暗示其预期用途，因为看起来验证意味着自动保存，但自动保存可以独立发生而没有隐含的关联。

【解决方案4】：

已经回答了——但只是为了补充一点知识，不能依赖事件处理程序的顺序。它在任何给定的实现中可能是可预测的，但这可以从一个（Javascript）实现变为下一个和/或随着时间的推移。唯一可以确定的是它们都会被执行——但不是按照什么顺序。

请注意，当有一个 DOM 对象的事件处理程序和另一个用于子级或父级的相同事件的事件处理程序时，情况类似 - 其中哪一个首先执行并不总是很清楚。见http://www.quirksmode.org/js/events_order.html

【讨论】：