如何更改同一事件的事件触发顺序

How do you change the event firing order of the same event?

本文关键字：事件 顺序 何更改      更新时间：2023-09-26

Jquery 绑定很棒，但我不知道绑定以什么顺序发生。因此，我目前的问题是：

$(document.body).delegate('form', methods.checkForm);
$('form').bind('submit', methods.submitFormIfCheckedFormIsTrue);
methods.checkForm = function (e) {
    if (!$(this).isVerified()) {
        return false;
    }
    return true;
};
methods.submitFormIfCheckedFormIsTrue = function (e) {
    e.preventDefault();
    $.ajax("/submitForm", {
        data:$(this).serialize(),
        type:"post"
    });
};

这显然不是我正在使用的实际代码，但它非常接近。发生的情况是，submitFormIfCheckedFormIsTrue 函数在 checkForm 函数之前或期间触发，因此检查非常无用。我的技巧是将类"checked"添加到表单中，并检查表单是否在其他函数中具有该类......但是，您单击"提交"，它会检查，然后如果一切正常，则必须再次单击它才能提交...这是迟钝的。

关于这个问题的另一件重要的事情是，由于无法更改的原因，它们位于我应用程序的完全不同的部分。此外，它们正在异步加载。

那么我想知道的主要事情...是如何更改顺序，或以某种方式设置事件的优先级......

如果你在

示例中使用"委托"，那么ajax提交总是会首先运行，所以对你的问题的简短回答是"你不能"。您的委托附加到 'body' 元素，因此附加到更接近 DOM 树中表单的元素的事件将首先触发。

事件从表单 -> 正文冒泡，因此执行此操作时没有排序。

一种选择是让您的验证触发第二个事件。

methods.checkForm = function (e) {
  e.preventDefault()
  if ($(this).isVerified()) {
    $(this).trigger('form-verified');
  }
};

然后，与其将另一个处理程序绑定到'submit'，不如将其绑定到'form-verified'。

$('form').bind('form-verified', methods.submitFormIfCheckedFormIsTrue);

这也是完成排序事件的另一种方法，如果它们附加到同一元素而不是使用委托。

此外，如果您使用的是jQuery>= 1.7，那么您应该使用on而不是bind和delegate http://api.jquery.com/on/。

更新

如果两者都绑定到同一元素，则它们将按照它们附加到元素的顺序触发。假设 checkForm 绑定在另一个事件之前，那么问题是如果其他事件附加到同一元素，return false; 不会阻止它们触发。为此，您还需要e.stopImmediatePropagation().

methods.checkForm = function (e) {
  e.preventDefault()
  if (!$(this).isVerified()) {
    e.stopImmediatePropagation();
  }
};

如果您必须调整事件的顺序，这里还有一个有用的答案。 jQuery 事件处理程序总是按照它们绑定的顺序执行 - 有什么办法解决这个问题吗？

在一般意义上，事件处理程序将按照它们被绑定的顺序调用，但前提是它们绑定在同一级别。在您的情况下，您将一个直接绑定到窗体，而另一个是在document.body级别绑定的委托处理程序。直接绑定的事件将首先发生，然后事件冒泡由另一个处理。

如果使用 .delegate() 将两个处理程序绑定在同一级别，则应按顺序调用它们：

$(document.body).delegate('form', 'submit', methods.checkForm);
$(document.body).delegate('form', 'submit',
                                  methods.submitFormIfCheckedFormIsTrue);

然后在第一个(泛型(处理程序中，您应该调用 event.stopImmediatePropagation() 方法来防止调用其他处理程序(请注意，只需返回 false 即可防止默认值并阻止事件进一步冒泡，但它不会阻止该级别的其他处理程序运行(：

methods.checkForm = function (e) {
  if (!$(this).isVerified()) {
      e.stopImmediatePropagation();
      return false;
  }
  return true;
};
(

顺便说一下，问题中显示的代码省略了.delegate()调用中的事件(第二个参数( - 我已经把它放在我的代码中。

或者直接绑定两个处理程序，而不是使用 .delegate() 。说到使用.delegate()，如果你使用的是最新版本的jQuery，你可能想切换到使用.on()，新的全能事件绑定方法。

"发生的情况是，submitFormIfCheckedFormIsTrue 函数在 checkForm 函数之前或期间触发">

肯定之前，而不是期间。(在几乎所有浏览器中(JavaScript 在单个线程上运行，因此您永远不会同时运行两个函数。

相关文章：