체크 박스의 클릭 이벤트를 취소하면 체크 할 수 없습니까?

Question

적어도 하나 이상을 확인해야한다는 조건으로 확인란 목록이 필요합니다.
다음 코드는 그 효과를 나타냅니다. 이 코드도 작동하는 이유

document.querySelector('div').addEventListener('click', function(evt){ 
 
    if(this.querySelectorAll('input:checked').length == 0) 
 
     evt.preventDefault() ; 
 
}) ;

<div> 
 
    <input type=checkbox checked> 
 
    <input type=checkbox> 
 
    <input type=checkbox> 
 
</div>

괜찮

그러나, 이해가 안 돼요.

첫째, 나는 더 체크 박스을 확인하지가 말한다 상태를 확인 한 후에 만 ​​클릭 이벤트에 .preventDefault()을하고 있어요. 이 시점에서 클릭 이벤트를 취소하면 아무런 차이가 없어야합니다.

둘째, 코드는 난 단지 클릭 이벤트를 취소하고 있습니다 때문에 완전히 이상한 키보드를 사용하여 확인란을 선택하려고 할 경우에도 작동합니다.

왜 코드가 작동하는지 설명하십시오. 입력 이벤트 리스너를 실행하는 동안

Answer 1

는, 소자의 상태에 미치는 영향은 이미 실제로 수행된다. event.preventDefault()이 호출되면이 변경은 리스너가 반환 할 때 실행 취소됩니다. 이를 통해 체크 상자 이벤트 핸들러는 체크 상자의 새 상태를 테스트 할 수 있으며 텍스트 입력의 키보드 이벤트 핸들러가 새 입력을 포함하는 값을 테스트 할 수 있습니다.

키보드를 사용할 때 작동하는 이유는 click 이벤트가 확인란을 클릭하는 모든 다른 방법을 포함하는 고급 이벤트이기 때문입니다. 키보드로 마우스로 할 수 있으며 터치 스크린 등이 있습니다. 특정 클릭 모드를 듣고 싶다면 mousedown, keypress 등을 사용해야합니다.