Question

我们知道，如果我们将input和keyDown侦听器添加到一个dom中，当我们输入内容时，它会触发keyDown，然后触发input。< / p>

但是如果我们在keyDown处理程序中添加一个调试器，你会发现它不会触发input处理程序，它只会触发keyDown处理程序（测试在Chrome和Safari中）

＆＃13;

document.getElementById('foo').addEventListener('keydown', function(){
	debugger;
  
  alert('keyDown')
})

document.getElementById('foo').addEventListener('input', function(){
	debugger;
  
  alert('input')
})

＆＃13;

<input id="foo" />

＆＃13;

有人可以解释一下吗？

Answer 1

非常有趣。

相反，如果keydown事件更改为keyup，则仅触发input事件（和警报）。

通过添加一些console.log()，我想我已经知道发生了什么。然而，肯定会有额外的见解。

tldr; debugger上keydown的存在会阻止输入keydown事件的值，这意味着输入的值从不更改，这意味着永远不会触发input事件。

在下面的示例中，debugger在keydown事件上触发，该事件在插入值之前发生。调试器暂停执行以及任何结果事件，从而阻止插入值。当恢复调试器时，输入永远不会使用新值更新，因此永远不会触发input事件。您可以在下面的示例中看到这一点 - 如果您打开Dev Tools并尝试在输入中输入值，然后单击调试器上的Resume，您将看到该值永远不会插入到输入中。因此永远不会触发input事件。

＆＃13;

document.getElementById('foo').addEventListener('keydown', function(e) {
  
  debugger;
  console.log(e.target.value, 'keyDown')
  
})

document.getElementById('foo').addEventListener('input', function(e) {
  
  debugger;
  console.log(e.target.value, 'input')
})

＆＃13;

<input id="foo" />

＆＃13;

为什么＆＃39;调试器＆＃39;将阻止事件（keydown - ＆gt; onInput）被触发

1 个答案: