代码之家 › 专栏 › 技术社区 › Russell

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

jquery

Russell · 技术社区 · 14 年前

我一直在调查浏览器之间的事件触发顺序,因为我们的应用程序正在经历一些不寻常的行为。

我创建了一个小测试来查看三个事件的顺序:change、keydown和keypress。

这是HTML(测试.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(测试.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)中,我得到了以下信息:

结果

向下键
向下键
按键

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

我环顾了一下四周,但没能确定问题出在哪里。
这是预期的行为吗? 所有浏览器都应该按指定的顺序触发jQuery事件吗? 或者我们应该取消对事件触发顺序的所有假设? 还是有什么东西阻碍了我的思考?

2 回复 | 直到 14 年前

Russell 14 年前

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

基本上,我将把validation/submit移到一个方法中,并从两个事件调用它,但要确保只调用一次,使用一个标志。

Michel Müller 11 年前

我知道这个问题由来已久,但我最终还是在与OP类似的情况下这样做了:

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前