'디버거'가 이벤트 (keydown -> onInput)가 실행되는 것을 막는 이유

Question

input과 keyDown 수신기를 하나의 dom에 추가하면 무언가를 입력 할 때 keyDown이 울리고 input이 트리거됩니다.

그러나 우리가 keyDown 핸들러에 디버거를 추가하는 경우, 당신이이 input 핸들러를 트리거하지 않습니다 것을 발견 할 것이다, 그것은 단지 (크롬과 사파리에서 테스트)를 keyDown 핸들러

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

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

<input id="foo" />

를 트리거

누구든지 설명 할 수 있습니까? 감사합니다 ~

Answer 1

매우 흥미 롭습니다.

반대로 keydown 이벤트가 keyup으로 변경되면 input 이벤트 (및 경고) 만 트리거됩니다.

몇 가지를 추가하면 어떤 일이 벌어지고 있는지 생각할 수 있습니다. 추가적인 통찰력은 그러나 확실히 환영된다.

tldr;keydown에 debugger이 있으면 keydown 이벤트의 값이 입력되지 않습니다. 즉, 입력 값이 변경되지 않습니다. 즉, input 이벤트가 발생하지 않습니다.

아래 예에서는 값이 삽입되기 전에 발생하는 keydown 이벤트에서 debugger이 트리거됩니다. 디버거는 실행 및 결과 이벤트를 일시 중지하여 값이 삽입되지 않도록합니다. 디버거가 다시 시작되면 입력 값이 새 값으로 업데이트되지 않으므로 input 이벤트는 트리거되지 않습니다. 아래 예제에서 볼 수 있습니다. - Dev Tools를 열고 입력 값을 입력 한 다음 디버거에서 Resume을 클릭하면 값이 입력에 삽입되지 않습니다. 따라서 input 이벤트는 절대로 트리거되지 않습니다.