Question

我一直在调查浏览器之间的事件触发顺序，因为我们的应用程序遇到了一些异常行为。

我创建了一个小测试来查看三个事件的顺序：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");
    });
});

当我在文本框中输入字母f，然后按回车键，我在Internet Explorer 8中获得以下内容：

结果

按键
按键
更改
按键
按键

但在Firefox（3.6.8）中，我得到以下内容：

结果

按键
按键
按键
按键
更改

更改事件的顺序很重要，因为我们在keydown事件中捕获enter键，但是使用change事件进行了一些验证。

我看了看，但无法确定问题所在。
这是预期的行为吗？所有浏览器是否应按指定顺序触发jQuery事件？或者我们应该删除所有关于事件发射顺序的假设吗？或者是否有其他东西妨碍了我没有想到的方式？

Answer 1

我在网上找不到关于这个特定场景的详细信息，除了事件顺序不是在浏览器实现中应该假设的事情。

这导致我删除了更改方法总是在onkeydown之后出现的假设，并且必须设计我的验证/提交过程。

基本上我将验证/提交移动到一个方法中，并从两个事件中调用它，但确保只使用一个标志调用它一次。

如果有人对此有任何额外的信息/建议，这将是伟大的。：）

Answer 2

我知道问题已经过时了，但我最终在与OP相似的情况下这样做了：

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

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

2 个答案: