jQuery中的更改順序/ keydown/keypress事件

我一直在研究瀏覽器之間的事件激發順序，因爲我們的應用程序遇到了一些不尋常的行爲。jQuery中的更改順序/ keydown/keypress事件

我創建了一個小測試來查看三個事件的順序：change，keydown和keypress。

下面是HTML（test.html中）：

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
     <script src="test.js"></script> 
    </head> 
    <body> 

     <input type="text" id="TextBox" /> 
     <input type="button" id="Button" value="Clear Results"/> 

     <hr /> 

     <table id="ResultTable" style="width: 100px"> 
      <tr><th>Results</th></tr> 
     </table> 
    </body> 

</html>

這裏是JS（test.js）：

/* 
    Appends event information to display table. 
*/ 

$(document).ready(function() { 
    $("#TextBox").change(function() { 
     $("<tr><td>Change</td></tr>").appendTo("#ResultTable"); 
    }); 

    $("#TextBox").keydown(function() { 
     $("<tr><td>Key down</td></tr>").appendTo("#ResultTable"); 
    }); 

    $("#TextBox").keypress(function() { 
     $("<tr><td>Key press</td></tr>").appendTo("#ResultTable"); 
    }); 

    $("#Button").click(function() { 
     $("#ResultTable").empty(); 
     $("<tr><th>Results</th></tr>").appendTo("#ResultTable"); 
    }); 
});

當I F到文本框中鍵入字母，然後按回車鍵，我得到在Internet Explorer 8如下：

結果

鍵不放
按鍵
變化
鍵不放
按鍵

，但在Firefox（3.6.8），我得到如下：

結果

Key down
按鍵
鍵不放
按鍵
變化

，因爲我們拍攝的keydown事件回車鍵，但做了一些驗證與變化事件的順序是顯著改變事件。

我看了一下，但一直沒有找到問題所在。
這是預期的行爲？所有瀏覽器是否應該按指定順序觸發jQuery事件？或者我們應該刪除事件觸發順序的所有假設嗎？或者還有其他的東西是我沒有想到的方式？

來源

2010-08-13 Russell

我很驚訝這還沒有解答，因爲我本來以爲，通過有趣的行爲IE瀏覽器。也許IE有太多有趣的行爲。 – Russell 2010-08-13 04:24:37

我可以確認IE9在這方面的行爲與IE8相同。 – nickf 2011-03-17 18:35:15

我在網絡上找不到關於這個特定場景的任何細節，除了那個事件順序不是在瀏覽器的實現中應該假定的。

這使我刪除了onkeydown之後總是會出現更改方法的假設，並且必須設計我的驗證/提交過程。

基本上我會將驗證/提交到一個方法中，並從兩個事件中調用它，但使用標誌確保它只被調用一次。

如果任何人有任何額外的信息/建議，這將是偉大的。:)

來源

2010-08-14 02:07:07 Russell

使用jquery的'one'函數應該允許您觸發而不必使用標誌，因爲事件只觸發一次。 – 2013-08-28 12:27:35

我知道這個問題是老了，但我結束了在類似的情況下這樣做是爲了OP：

$("#my_form").one("change keypress", ":input", ask_user_to_save_before_leaving);

來源

2013-08-28 12:32:33

jQuery中的更改順序/ keydown/keypress事件

回答

相關問題