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

【问题标题】：Order of change/keydown/keypress events in jQueryjQuery 中更改/keydown/keypress 事件的顺序
【发布时间】：2010-08-13 01:28:54
【问题描述】：

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

我创建了一个小测试来查看三个事件的顺序：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，然后按 Enter 键时，我在 Internet Explorer 8 中得到以下信息：

结果

按下键
按键
改变
按下键
按键

但在 Firefox (3.6.8) 中，我得到以下信息：

结果

按下键
按键
按下键
按键
改变

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

我环顾四周，但无法确定问题出在哪里。
这是预期的行为吗？所有浏览器都应该按指定顺序触发 jQuery 事件吗？还是我们应该删除所有关于事件触发顺序的假设？还是有其他事情妨碍了我的思考？

【问题讨论】：

我很惊讶这还没有答案，因为我认为这是 IE 的有趣行为。也许 IE 有太多有趣的行为。
我可以确认 IE9 在这方面的行为与 IE8 相同。

标签： jquery

【解决方案1】：

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

这使我消除了更改方法总是在 onkeydown 之后出现的假设，并且必须考虑到这一点来设计我的验证/提交过程。

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

如果有人对此有任何额外的信息/建议，那就太好了。 :)

【讨论】：

使用 jquery 'one' 函数应该允许您触发而无需使用标志，因为事件只触发一次。

【解决方案2】：

我知道这个问题很老了，但我最终在与 OP 类似的情况下这样做了：

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

【讨论】：