이벤트 모델
이벤트를 연결하는 방법을 이벤트 모델이라고 부른다.
DOM(1)에서 이벤트를 연결할 때 addEventListener()를 사용했는데 이 방법을 표준 이벤트 모델이라고 부른다.
모든 이벤트 모델의 이벤트 리스너는 첫 번째 매개변수로 이벤트 객체를 받는다. 이벤트 객체에는 이벤트와 관련된 정보가 들어있다.
키보드 이벤트
| 이벤트 | 설명 |
|---|---|
| keydown | 키가 눌릴 때 실행. 키보드를 꾹 누르고 있을 때도, 입력될 때도 실행. |
| keypress | 키가 입력되었을 때 실행. 하지만 웹 브라우저에 따라서 아시아권의 문자를 제대로 처리하지 못하는 문제가 있다. |
| keyup | 키보드에서 키가 떨어질 때 실행. |
IME 입력 문자
아시아권의 문자를 일반적으로 조합형 문자(IME 입력 문자)라고 부른다. 한 글자를 입력하기 위해서 한국어와 중국어, 일본어의 경우 여러 글자를 조합해야 한다. 웹 브라우저에 따라서 keypress 이벤트는 조합 중에 발생하기도 발생하지 않기도 하는 문제가 있다.
키보드 키 코드 사용하기
키보드 이벤트가 발생할 때 이벤트 객체로 어떤 키를 눌렀는지와 관련된 속성들이 따라온다.
| 이벤트 속성 이름 | 설명 |
|---|---|
| code | 입력한 키 |
| keyCode | 입력한 키를 나타내는 숫자 |
| altKey | Alt키를 눌렀는지 |
| ctrlKey | Ctrl키를 눌렀는지 |
| shiftKey | Shift키를 눌렀는지 |
code 속성은 입력한 키를 나타내는 문자열이 들어있고, altKey, ctrlKey, shiftKey 속성은 해당 키를 눌렀는지 불 자료형 값이 들어있다.
이벤트 발생 객체
코드의 규모가 커지면 이벤트 리스너를 외부로 분리하는 경우가 많아진다. 이러한 경우에 이벤트를 발생시킨 객체에 어떻게 접근할 수 있을까?
1. event.currentTarget 속성을 사용한다.
() => {} 와 function () {} 형태 모두 사용 가능하다.
2. this 키워드를 사용한다.
화살표 함수가 아닌 function () {} 형태로 함수를 선언한 경우에 사용 가능.
글자 입력 양식 이벤트
사용자로부터 입력을 받을 때 사용하는 요소를 입력 양식이라고 부르고 입력 양식에는 input태그, textarea태그, button태그, select태그 등이 있다.
기본 이벤트 막기
웹 브라우저는 이미지에서 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴를 출력한다. 이처럼 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것을 기본 이벤트라고 한다. 이러한 기본 이벤트를 제거할 때는 event 객체의 preventDefault() 메소드를 사용한다.
