[JavaScript] 자바스크립트 이벤트 객체

앞의 포스팅에서 이벤트가 발생했을 때 실행하는 함수에는 이벤트 핸들러와 이벤트 리스너가 있다고 설명했다. 이들도 함수이기 때문에 인수를 받을 수 있는데 그 인수를 이벤트 객체라고 한다.

 

이벤트 객체

 

이벤트 객체란 해당 이벤트의 다양한 정보를 저장한 프로퍼티와 이벤트의 흐름을 제어하는 메서드가 담긴 객체이다.

 button.addEventListener("mouseover", function (e) {
    e.currentTarget.style.backgroundColor = "blue";
 }, false);

위의 코드에서 이벤트 리스너 부분을 보면 인수 e를 받고 있다. 바로 이 e를 이벤트 객체라 부른다. 함수의 인수이기 때문에 인수명은 자유롭지만 관례적으로 e 또는 event라고 명시한다.

 

내가 사용하는 IDE인 intelliJ를 사용하면 코드 작성에 도움을 받을 수 있는데 예를 들어 아래와 같이 어떤 인수인지 무엇이 들어가야 하는지 알려준다.

 

위 이미지처럼 리스너인 익명함수의 인수로 e를 받았고 그 e에 MouseEvent라고 되어있다. 즉, e라는 이벤트 객체는 앞에 적은 mouseover라는 이벤트의 정보를 담고 있는 것이다.

 

이벤트 객체 프로퍼티

 

이벤트 객체는 프로퍼티를 갖고 있는데 위 코드에서 currentTarget도 이벤트 리스너가 등록된 DOM 요소 객체를 가리키는 프로퍼티이다. 프로퍼티는 공통 프로퍼티, 마우스 이벤트, 키보드 이벤트로 구분할 수 있다. 외울 필요 없이 그때 그때 구글링 해서 쓰면 된다.

 

• 공통 프로퍼티

property name	value type	description
type	문자열	이벤트 이름
target	요소 객체	이벤트가 발생한 요소
currentTarget	요소 객체	이벤트 리스너가 등록된 요소 객체
eventPhase	정수	이벤트 전파 단계 (1 : 캡처링, 2 : 타깃, 3 : 버블링)
timeStamp	정수	이벤트 발생 시각(밀리초)
bubbles	논리값	버블링 단계인지를 뜻하는 값
cancelable	논리값	preventDefault()로 기본 이벤트를 취소할 수 있는지를 뜻하는 값
defaultPrevented	논리값	preventDefault()로 기본 작업이 취소되었는지를 뜻하는 값
isTrusted	논리값	해당 이벤트가 사용자의 액션에 의해 생성되었는지를 뜻하는 값

 

• 마우스 이벤트 객체

property name	value type	description
screenX, screenY	정수	클릭한 위치의 화면 좌표(컴퓨터 화면의 왼쪽 위 꼭짓점에서 시작)
clientX, clientY	정수	클릭한 위치의 윈도우 좌표(표시 영역의 왼쪽 위 꼭짓점에서 시작)
pageX, pageY	정수	클릭한 위치의 문서 좌표(문서의 왼쪽 위 꼭짓점에서 시작)
offsetX, offsetY	정수	이벤트가 발생 한 요소의 상대 좌표(요소의 왼쪽 위 꼭짓점에서 시작)
altKey, ctrlKey, shiftKey	논리값	각각의 키가 눌렸는지를 뜻하는 논리값
detail	정수	이벤트의 자세한 정보 : 마우스 이벤트의 경우 클릭한 횟수
button	정수	눌린 마우스의 버튼 (0 : 왼쪽, 1 : 휠, 2 : 오른쪽)
relatedTarget	객체	mouseover 이벤트에서는 마우스가 떠난 노드(요소)
		mouseout 이벤트에서는 마우스가 들어온 노드(요소)

 

• 키보드 이벤트 객체

property name	value type	description
altKey, ctrlKey, shiftKey	논리값	각각의 키가 눌렸는지를 뜻하는 논리값
metaKey	논리값	Meta 키가 눌렸는지를 뜻하는 논리값(윈도는 윈도키, 맥은 command키)
key	문자열	눌린 키의 DOMString (그냥 key 값임)
keyCode	정수	눌린 키의 키 코드
code	문자열	눌린 키가 키보드에서 차지하는 물리적 위치를 뜻하는 문자열

 

다음 포스팅에서는 자바스크립트 이벤트 개념에서 중요한 것 중 하나인 이벤트의 전파에 대해 알아보도록 하겠다.