logo标签列表

jQuery中change/keydown/keypress事件的顺序

jquery
10

我一直在研究浏览器中的事件触发顺序，因为我们的应用程序出现了一些不寻常的行为。

我创建了一个小测试来查看这三个事件的顺序：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中会得到以下结果：
结果
- Key down - Key press - Change - Key down - Key press
但在Firefox（3.6.8）中，会得到以下结果：
结果
- Key down - Key press - Key down - Key press - Change 由于我们在keydown事件中捕获回车键，然后使用change事件进行一些验证，因此change事件的顺序很重要。
我已经查看了一些资料，但还没有找到问题出在哪里。这是预期行为吗？所有浏览器都应该按特定顺序触发jQuery事件吗？还是应该删除事件触发顺序的所有假设？或者还有其他问题我没有考虑到吗？
1
我很惊讶这个问题还没有答案，因为我认为这是IE的有趣行为。也许IE有太多有趣的行为了。 - Russell
1
我可以确认，在这方面IE9的行为与IE8相同。 - nickf
2个回答
3

在网上没有找到关于这个具体情况的详细信息，除了浏览器实现中不应该假设事件顺序以外。

这让我放弃了假设change方法总是在onkeydown之后调用，并且必须考虑这一点来设计我的验证/提交过程。

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

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

1
使用jQuery的'one'函数可以让您在不使用标志的情况下触发事件，因为该事件仅会被触发一次。 - Michel Müller
1

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

$("#my_form").one("change keypress", ":input", ask_user_to_save_before_leaving);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接