KeyDown, KeyPress, KeyUp: 차이점은 무엇이며 각각 언제 사용해야 합니까?

onKeyPress vs. onKeyUp vs. onKeyDown 이해

이 세 가지 이벤트의 차이점을 검색하는 동안 onKeyPress가 onKeyUp과 동시에 발생한다는 일반적인 오해에 직면할 수 있습니다. 이러한 혼란을 명확히 하고 각 이벤트의 고유한 특성을 조명해 보겠습니다.

이벤트 타임라인

주요 입력 이벤트의 순서에는 다음과 같은 분석이 있습니다.

1. onKeyDown: 사용자가 처음으로 키를 누를 때 트리거됩니다. key.
2. onKeyPress: 더 이상 사용되지 않으며 대신 onKeyDown을 사용하는 것이 좋습니다. 이 이벤트는 사용자가 키를 눌렀다가 놓을 때 발생하며 사실상 onKeyDown과 onKeyUp.
3. onKeyUp: 사용자가 이전에 누른 키를 놓습니다.

마우스 이벤트와의 비유

이러한 주요 이벤트 간의 관계를 파악하기 위해 해당 마우스 이벤트와 비유를 그려보겠습니다.

• onKeyDown: MouseDown과 동일
• onKeyPress: 클릭과 동일 (이제는 더 이상 사용되지 않으며 onKeyDown으로 대체됨)
• onKeyUp: MouseUp과 동일

브라우저 예외: WebKit

웹 브라우저 세계에서 WebKit은 추가 이벤트: textInput. 따라서 WebKit의 이벤트 순서는 다음과 같습니다.

keydown
keypress
textInput     
keyup

실제 데모

이러한 이벤트가 실제로 작동하는 모습을 보려면 다음 코드 조각을 실행하세요.

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

이 스크립트는 로그를 기록합니다. 키보드와 상호 작용할 때 이벤트 유형을 콘솔에 표시합니다. 키를 눌렀다가 놓을 때 독특한 이벤트 순서를 확인할 수 있습니다.

위 내용은 KeyDown, KeyPress, KeyUp: 차이점은 무엇이며 각각 언제 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!