Why does the "debugger" prevent the event from firing (keydown & # 8594; onInput)

Question

We know that if we add the listener inputand keyDownone dom, when we do something keyDown, it will cause keyDown, and then activates input.

But if we add a debugger to the handler keyDown, you will find that it will not start the handler input, it will just call the handler keyDown(test in Chrome and Safari)

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

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

<input id="foo" />

Run codeHide result

Can anyone explain this?

Answer 1

Very interesting.

Conversely, if the event is keydownchanged to keyup, only the event input(and warning) is triggered .

console.log(), , , . .

TL;DR; debugger keydown keydown, , , input .

debugger keydown, , . , . , , input . : Dev Tools , "" , , . , input .

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')
})

<input id="foo" />

Hide result