如何更改同一事件的事件觸發順序？

Question

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"
    });
};

這顯然不是我正在使用的實際代碼，但它非常接近。 會發生什么，commitFormIfCheckedFormIsTrue函數在checkForm函數之前或期間觸發，因此檢查非常無用。 我的黑客是將“已檢查”類添加到表單中並檢查表單是否在其他函數中具有該類...但是然后單擊提交，它會檢查，然后您必須再次單擊它以提交它如果一切順利......這是遲鈍的。

另一件關於這個問題很重要的事情是，由於無法改變的原因，我在應用程序中處於完全不同的部分。 而且，它們是異步加載的。

我想知道的主要事情是...如何更改順序，或以某種方式設置事件的優先級......

Answer 1

如果你在你的例子中使用'delegate'的方式，那么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事件處理程序總是按照綁定的順序執行 - 任何方式都可以解決這個問題？

Answer 2

在一般意義上，事件處理程序將按它們綁定的順序調用，但前提是它們綁定在同一級別。 在您的情況下，您將一個直接綁定到表單，而另一個是綁定在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() ，即新的do-everything事件綁定方法。

“會發生什么，submitFormIfCheckedFormIsTrue函數在checkForm函數之前或期間觸發”

絕對是在之前，而不是在期間。 （在幾乎所有瀏覽器中）JavaScript在單個線程上運行，因此您不會同時運行兩個函數。