자바스크립트 이벤트 중 Keyboard와 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다.
Keyboard Event
keydown : 키를 누를 때
keyup : 키를 뗄 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text"/>
<script>
const inputEl = document.querySelector('input');
inputEl.addEventListener('keydown', event => {
console.log(event.key);
}); // 한글 치면 왜 process가 나오지
// 키를 입력하면 콘솔에서 입력한 키에 대한 내용 확인 가능
// keyup은 누를 때는 안나오고, 떼고 나면 출력됨
inputEl.addEventListener("keydown", event=>{
if (event.key === 'Enter' && !event.isComposing) {
console.log(event.isComposing);
// 한국어, 일본어, 중국어 : CJK 문자
// CJK 문자는 브라우저에서 처리하는 과정이 한단계 더 필요
// isConposing으로 확인
console.log(event.target.value);
// event.target : 이벤트가 일어난 곳
// event.target.value : 이벤트가 일어난 곳에서 입력된 값
}
}); // 엔터를 누르면 input에 넣은 값이 출력됨
</script>
</body>
</html>'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] 불변성과 가변성 (0) | 2023.04.27 |
|---|---|
| [JavaScript] 이벤트 - Focus & Form Event (0) | 2023.04.24 |
| [JavaScript] 이벤트 - Mouse Event (0) | 2023.04.24 |
| [JavaScript] 이벤트 - 이벤트 위임, 커스텀 이벤트 (0) | 2023.04.23 |
| [JavaScript] 이벤트 버블링/캡쳐링 (0) | 2023.04.22 |
