AS 5 | JS - DOM(2)

4_21ee·2021년 9월 5일
0

AdditionalStudy

목록 보기
6/12

이벤트 모델

이벤트를 연결하는 방법을 이벤트 모델이라고 부른다.
DOM(1)에서 이벤트를 연결할 때 addEventListener()를 사용했는데 이 방법을 표준 이벤트 모델이라고 부른다.

모든 이벤트 모델의 이벤트 리스너는 첫 번째 매개변수로 이벤트 객체를 받는다. 이벤트 객체에는 이벤트와 관련된 정보가 들어있다.

키보드 이벤트

이벤트설명
keydown키가 눌릴 때 실행. 키보드를 꾹 누르고 있을 때도, 입력될 때도 실행.
keypress키가 입력되었을 때 실행. 하지만 웹 브라우저에 따라서 아시아권의 문자를 제대로 처리하지 못하는 문제가 있다.
keyup키보드에서 키가 떨어질 때 실행.

IME 입력 문자

아시아권의 문자를 일반적으로 조합형 문자(IME 입력 문자)라고 부른다. 한 글자를 입력하기 위해서 한국어와 중국어, 일본어의 경우 여러 글자를 조합해야 한다. 웹 브라우저에 따라서 keypress 이벤트는 조합 중에 발생하기도 발생하지 않기도 하는 문제가 있다.

키보드 키 코드 사용하기

키보드 이벤트가 발생할 때 이벤트 객체로 어떤 키를 눌렀는지와 관련된 속성들이 따라온다.

이벤트 속성 이름설명
code입력한 키
keyCode입력한 키를 나타내는 숫자
altKeyAlt키를 눌렀는지
ctrlKeyCtrl키를 눌렀는지
shiftKeyShift키를 눌렀는지

code 속성은 입력한 키를 나타내는 문자열이 들어있고, altKey, ctrlKey, shiftKey 속성은 해당 키를 눌렀는지 불 자료형 값이 들어있다.

이벤트 발생 객체

코드의 규모가 커지면 이벤트 리스너를 외부로 분리하는 경우가 많아진다. 이러한 경우에 이벤트를 발생시킨 객체에 어떻게 접근할 수 있을까?

1. event.currentTarget 속성을 사용한다.
() => {} 와 function () {} 형태 모두 사용 가능하다.

2. this 키워드를 사용한다.
화살표 함수가 아닌 function () {} 형태로 함수를 선언한 경우에 사용 가능.

글자 입력 양식 이벤트

사용자로부터 입력을 받을 때 사용하는 요소를 입력 양식이라고 부르고 입력 양식에는 input태그, textarea태그, button태그, select태그 등이 있다.

기본 이벤트 막기

웹 브라우저는 이미지에서 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴를 출력한다. 이처럼 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것을 기본 이벤트라고 한다. 이러한 기본 이벤트를 제거할 때는 event 객체의 preventDefault() 메소드를 사용한다.

profile
Life is all about timing.

0개의 댓글