javascript - 替换输入元素仅在 Chrome 中引发 onchange 事件

Question

我发现 Chrome 和 Firefox 之间的行为存在奇怪的差异，想知道是否有人知道发生了什么。

首先，代码(参见 http://jsfiddle.net/pXgaE/1/ 的实例):

HTML:

<input id='me' onchange='func()' />

Javascript:

function func() {
    console.log( "resetting" );
    document.getElementById( 'me' ).parentNode.innerHTML = "test";
}

在 Firefox 中，如果我在字段中输入内容并按“回车”，日志消息就会出现一次。另一方面，在 Chrome 中，日志消息会出现两次。

Chrome 的事件处理有何不同(错误？)？

旁白:不，我也不太喜欢这段代码，我宁愿更明智地重写它。但我真的很好奇到底发生了什么来解释这一点。

编辑:出于某种原因，关闭输入标签每次都会让我烦恼。它们现在应该正确关闭。另外，仅供引用，我在 Mac 上的 Chrome 30.0.1599.101 以及 Chrome Canary 32.0.1680.0 上也遇到了此行为。

编辑2:我最初将innerHTML设置为另一个输入标签，但我可以通过设置为纯文本来重现这一点。更新 Javascript 和 JSFiddle 链接。

Answer 1

根据 @carter 和 second test case 的一些见解，我想我现在明白是怎么回事了。

对于正常的 put-in-new-text-and-hit-enter 情况，首先会触发 onchange 事件。这种情况在 Firefox 和 Chrome 中都会发生，这是我所期望的。

其次，在 Chrome 中，如果 input 为“脏”(即发生更改)并随后被销毁，onchange 事件也会触发。这在 Firefox 中不会发生。请注意，input 是否脏很重要 - 如果自上次 onchange 后没有发生任何更改，通常不会发送另一个事件。

Chrome 对此行为有一个异常(exception):如果 input 在处理 onchange 事件期间被销毁，它显然仍然存在认为input是脏的，因此触发第二个onchange事件。

您可以通过将上面的 Javascript 更改为以下内容来看到这一点:

function func() {
    console.log( 'resetting' );
}

setTimeout( function() {
    document.getElementById( 'me' ).parentNode.innerHTML = 'test';
}, 3000 );

您会发现，如果您在替换发生之前输入内容，您将在 Chrome 中收到日志消息，但在 Firefox 中则不会。