JavaScript Events Handlers — Keyboard and Load Events를 해석한 것입니다.
자바스크립트에서 이벤트들은 앱에서 일어나는 동작들이다. 이벤트는 입력된 인풋값, 제출되는 폼, 그리고 리사이징같은 요소의 변화 또는 앱이 동작할때 일어난 에러등과 같은 다양한 것들로인해 발생한다. 이러한 이벤트에 반응하기 위해 에벤트 핸들러를 할당할 수 있다.
Dom 요소에 발생한 이벤트는 해당 이벤트의 DOM 오브젝트의 속성에 헨들러를 할당함으로써 다룰 수 있다. 이 아티클에서는, 우리는 편집할 수 있는 Input 엘리먼트의 onkeydown와 onkeypress 속성과 어떤 dom 엘리먼트의 onload 속성을 어떻게 사용하는지 볼 것이다. 또한 audio와 video같은 미디어 엘리먼트의 onloadeddata속성을 볼 것이다.
onkeydown
Keydown 이벤트를 다루기 위해서 인풋 DOM 요소의 Onkeydown 속성에 이벤트 핸들러 함수를 설정할 수 있다. Keydown 이벤트는 문자값을 생성하지는 상관없이 어떤 키가 눌러질때 발생합니다. Keypress 이벤트는 입력된 문자를 제공하는 반면에 Keydown 이벤트는 어떤 키가 눌렸는지 알려주는 코드를 제공한다.
예를 들어 소문자 a 는 keydown일 때는 65 키코드를 전달 할 것이다. 하지만 keypress는 문자코드 97을 전달 할 것이다. Keypress는 더이상 사용되지 않으므로 프로덕션 코드에서는 사용하지 않아야 한다.
65버전 이후 파이어폭스에서 중국어와 일본어, 한국어 사용자를 위한 크로스 브라우징 호환성을 향상시키기 위해서 keydown 이벤트가 IME 구성 중에 실행된다. 우리는 IME 구성중에 keydown이벤트를 무시할 수 있으며 Keydown 이벤트 핸들러가 제공하는 이벤트 객체의 isComposing 속성을 확인 할 수 있다. 예를 들어 우리는 이렇게 작성 할 수 있다.
const input = document.querySelector('input');
input.onkeydown = event => {
if (event.isComposing || event.keyCode === 229) {
return;
}
};중국어,일본어 또는 한국어를 입력 할때 마다 isComposing 속성는 true값을 가질 것이고 keycode 속성은 229값을 가질 것이다.
우리는 사용자의 키보드에 의해 놀러진 키 코드의 값을 기록하기 위해서도 키코드를 사용할 수 있다. 우리는 먼저 다음 HTML코드를 작성할 수 있다.
<input type="text" id="input" required>
<p id="log"></p>그리고 해당하는 JavaScript 코드에서 우리의 인풋 엘리먼트의 onkeydown 속성을 설정함으로써 keydown을 위한 이벤트 핸들러 함수를 붙이기 위한 코드를 작성 할 수 있다.
const input = document.querySelector('input');
const log = document.getElementById('log');
input.onkeydown = e => {
log.textContent += ` ${e.code}`;
};Id가 log인 엘리먼트에서 아래와 같은 결과를 얻을 수 있다.
KeyE KeyR KeyF KeyG KeyT KeyG KeyT KeyG KeyH KeyH KeyF KeyV KeyG KeyB KeyG KeyBonkeyup
Input 엘리먼트의 Onkeyup 속성은 keyup 이벤트를 다루기 위해 이벤트 핸들러 함수를 붙이게 한다. Keyup 이벤트는 사용자가 이전에 눌렀던 키를 놓을 때 발생된다.
Keypress 이벤트는 입력된 문자를 제공하는 반면에 Keyup 이벤트는 어떤키가 눌러졌는지 나타내는 코드를 제공한다. 예를 들어 소문자 a 는 keyup에서는 65 키코드를 전달하지만 keypress에서는 문자코드 97을 전달할 것이다.
65버전 이후 파이어폭스에서, keyup 이벤트 또한 중국어, 일본어, 한국어 사용자의 크로스 브라우저 호환성을 향상 시키기 위해서 IME 구성 중에 실행한다. 우리는 keyup 이벤트 IME 구성중에 무시할 수 있으며 Keyup 이벤트에 의해 제공된 이벤트 객체에서 IsComposing 속성을 확인할 수 있다. 예를 들어 다음과 같이 작성 할 수 있다.
const input = document.querySelector('input');
input.onkeyup = event => {
if (event.isComposing || event.keyCode === 229) {
return;
}
};우리는 사용자의 키보드에 의해 놀러진 키 코드의 값을 기록하기 위해서도 키코드를 사용할 수 있다. 우리는 먼저 다음 HTML코드를 작성할 수 있다.
<input type="text" id="input" required>
<p id="log"></p>그리고 해당하는 JavaScript 코드에서 우리의 인풋 엘리먼트의 onkeyup 속성을 설정함으로써 keyup을 위한 이벤트 핸들러 함수를 붙이기 위한 코드를 작성 할 수 있다.
const input = document.querySelector('input');
const log = document.getElementById('log');
input.onkeyup = e => {
log.textContent += ` ${e.code}`;
};Id가 log인 엘리먼트에서 아래와 같은 결과를 얻을 수 있다.
