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中，如果我在字段中输入内容并点击“enter”，则会出现一次日志消息。另一方面，在Chrome中，日志消息显示为两次。

Chrome的事件处理有什么不同（错误？）？

旁白：不，我也不太喜欢这段代码，而且我更愿意更明智地重写它。但是我真的很好奇发明了什么可以解释这一点。

编辑：出于某种原因，每次关闭输入标记都会让我感到困惑。他们现在应该妥善关闭。此外，仅供参考，我在Mac上的Chrome 30.0.1599.101以及Chrome Canary 32.0.1680.0上都有此行为。

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

Answer 1

通过@carter和second test case的一些见解，我想我明白现在发生了什么。

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

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

Chrome对此行为有例外情况：如果在处理input事件期间onchange被销毁，它显然仍然会考虑{{1} }脏，因此触发第二个 input事件。

您可以通过将上面的Javascript更改为以下内容来查看此内容：

onchange

您会看到，如果您在更换前输入输入内容，则会在Chrome中收到日志消息，但不会在Firefox中显示。