javascript - keydown 事件(TAB 键)修改元素值时未触发 Change 事件

Question

给定的 HTML:

<input type="text" id="test" />

和 JavaScript 的:

var $test = $('#test');

$test.on('keydown', function(event) {
    if (event.keyCode === 9) {
        $(event.target).val('change it!');
    }
});

$test.on('change', function(event) {
    alert('I am not called!');
});

如果我在输入中键入任何内容并点击 tab，为什么 change 事件没有触发？ keydown 事件触发，并更新输入的值。

如果我删除 .val() 调用，那么 change 会触发。

起初，我认为这是一个 jQuery 问题(运行 1.9.1)，但确认如果我使用纯 JavaScript 会发生相同的行为。

Answer 1

change仅针对用户提交的更改触发。换句话说，使用 JavaScript 在后台更改元素的值不会触发 change .

Tab 实际上并没有改变元素的内容；它只是切换焦点。在某些方面，您正在键入 tab 键来更改元素的内容是巧合的(您还不如按一个按钮来间接更新它，这也不会触发 change)。

The DOM spec解释了为什么在您的特定情况下，如果您键入并按 Tab 键，用户输入将被丢弃并且不会触发任何更改。

具体来说:

The keyboard events defined in this specification occur in a set order relative to one another, for any given key:

• keydown
• keypress (only for keys which produce a character value)
• Any default actions related to this key
• keyup

当您按下 Tab 键时，keydown被触发。繁荣，你的事件处理程序被调用了!元素内容由您的脚本更新——不会触发任何更改，因为它是脚本执行的。用户贡献的内容被清除。现在是浏览器执行与选项卡关联的默认操作的时候了:将焦点移开并查看元素是否被用户更改(触发 onchange)。不，是剧本改的!没有 change开火。

因此，如果您删除 val()行，您会注意到两件事。

1. 如果您给元素焦点并关闭制表符，则不会 change被触发——没有发生任何变化，因为选项卡不改变字段内容。
2. 如果您将焦点放在元素上并键入内容并关闭，change被解雇是因为在那个神奇的“与选项卡相关的默认操作”时刻，浏览器注意到用户做出了更改。

哇哦!