이벤트

자바스크립트에서의 이벤트의 모든 것

이벤트란, 특정한 상황이 발생했을 때 특정한 일을 수행하도록 하는 일종의 트리거다.
타 언어와 마찬가지로, 자바스크립트에서도 이벤트 관련 기능을 지원한다.
이벤트에 대해 파헤치기 전에, 먼저 이벤트의 작동 방식부터 살펴보자.

이벤트의 작동 방식
이벤트 작동 방식은 크게 bubbling과 capturing으로 나뉜다.
이것은 DOM 계층구조에 따른 이벤트 추출 방식으로,
bubbling의 경우 가장 하위 구조의 이벤트부터 처리하고
capturing의 경우 가장 상위 구조의 이벤트부터 처리한다.
이에 대한 예를 들어보자.

<div onclick="alert('1')"><div onclick="alert('2')"></div></div>

이렇게 영역을 계층구조로 잡아놓고, div 영역을 클릭하면 어떻게 될까 ?!
bubbling 방식의 경우, 2가 먼저 뜨고 1이 다음에 뜬다.
capturing 방식의 경우, 1이 먼저 뜨고 2가 다음에 뜬다.
이제 bubbling과 capturing의 차이가 어느정도 이해가 될 것이다.

이벤트 핸들러
이제 실질적으로 이벤트를 어떻게 객체에 추가하는지 알아보자.
이벤트를 객체에 추가하는 방식은 두 가지가 있다. (고전방식, 리스너)

고전방식의 이벤트는 매우 직관적이다.
obj.onclick = fnHandle과 같이 객체의 하위 element로 이벤트를 설정하면 된다.
고전방식의 단점은, 한 객체에 단 하나의 이벤트 핸들러밖에 등록하지 못한다는 것.
만약 사용자가 다음과 같이 이벤트 핸들러를 두 번 등록하면,
새로운 핸들러 함수가 이전 핸들러 함수를 덮어쓰도록 처리된다.

obj.onclick = fnHandle1
obj.onclick = fnHandle2

이제 리스너 방식에 대해 살펴본다.
이 방식의 단점이라면, IE의 경우에만 함수 이름이 다르다는 것이다.
하지만 약간의 꼼수를 더해서 처리해주도록 하면 아무런 문제가 없다.
이벤트를 등록하는 함수는 다음과 같다.

// 인터넷 익스플로러(IE)의 경우 이벤트 등록/삭제
obj.attachEvent("name_of_event", fnHandle)
obj.detachEvent("name_of_event", fnHandle)

// 그외 브라우저의 경우 이벤트 등록/삭제
obj.addEventListener("name_of_event", fnHandle, capture)
obj.removeEventListener("name_of_event", fnHandle, capture)

각 인자들에 대해서 설명하자면, name_of_event는 이벤트 종류이다.
fnHandle은 이벤트가 발생했을 때 처리할 함수(핸들러)이고,
마지막 인자인 capture는 capturing 방식을 사용할 것인지의 여부를 결정한다.

capture 인자는 입력하지 않아도 상관없지만(기본값 false: bubbling),
만약 입력했을 경우, add와 remove에서의 capture 여부를 맞춰주어야 한다.
그렇지 않는다면 이벤트 리스너에서 함수가 제대로 제거되지 않는다.

다음은 이벤트를 등록하는 예제이다. (모든 브라우저에서 동작한다)

var fnClick1 = function() { alert('1 clicked'); }
var fnClick2 = function() { alert('2 clicked'); }

var odiv = document.getElementById('div_box');
// 브라우저가 IE가 아닌 경우 처리
if(odiv.addEventListener)
  odiv.addEventListener(onclick", fnClick1);
// 브라우저가 IE인 경우 처리
else
  odiv.attachEvent(onclick", fnClick2);

위 예제에서 odiv를 클릭하면, IE인 경우 2 clicked가, 아닌 경우 1 clicked가 뜬다.

이벤트 객체
이벤트 객체를 사용해서 어떤 이벤트가 어떻게 발생했는지 여부를 알 수 있다.
이 경우에도 인터넷 익스플로러(IE)와 타 브라우저간에 차이점이 존재한다.
이래저래 IE는 자바스크립트 코더에게는 골치덩어리다.
다음은 이벤트 객체의 속성(properties) 목록이다.

altKey ALT키가 눌려있는지의 여부를 반환
bubbles 이벤트 작동방식이 bubbling인지 여부를 반환 (IE 지원 안함)
button 마우스의 어떤 버튼이 눌렸는지를 코드로 반환
  0 아무런 버튼도 눌리지 않음
  1 왼쪽 버튼이 눌림
  2 오른쪽 버튼이 눌림
  3 왼쪽과 오른쪽 버튼이 동시에 눌림
  4 가운데 버튼이 눌림
  5 왼쪽과 가운데 버튼이 동시에 눌림
  6 오른쪽과 가운데 버튼이 동시에 눌림
  7 왼쪽과 오른쪽, 그리고 가운데 버튼이 동시에 눌림
cancellable 이벤트가 취소되었는지 여부를 반환 (IE 지원 안함)
cancelBubble 이벤트 bubbling이 취소되었는지 여부를 반환
charCode 입력된 키의 유니코드 값을 반환 (IE 지원 안함)
clientX 브라우저 영역에서의 마우스 X좌표 위치를 반환
clientY 브라우저 영역에서의 마우스 Y좌표 위치를 반환
ctrlKey CTRL 키가 눌려있는지의 여부를 반환
currentTarget 이벤트가 수행되고 있는 대상 객체를 반환 (IE 지원 안함)
detail 마우스 버튼이 클릭된 횟수를 반환 (IE 지원 안함)
eventPhase 이벤트 처리 상황을 코드로 반환 (IE 지원 안함)
  0 capturing 처리 상황
  1 이벤트 처리 대상에 위치함
  2 bubbling 처리 상황
isChar 입력된 키가 문자인지 여부를 반환 (IE 지원 안함)
keyCode 입력된 키의 키코드 반환
offsetX 이벤트 대상 객체에서의 상대적 마우스 X좌표 위치를 반환 (IE만 지원)
offsetY 이벤트 대상 객체에서의 상대적 마우스 Y좌표 위치를 반환 (IE만 지원)
pageX 브라우저 페이지에서의 상대적 마우스 X좌표 위치를 반환 (IE 지원 안함)
pageY 브라우저 페이지에서의 상대적 마우스 Y좌표 위치를 반환 (IE 지원 안함)
repeat 키보드 이벤트 발생시 키가 여러번 눌렸는지 여부 반환 (IE만 지원)
screenX 전체 모니터 스크린에서의 마우스 X좌표 위치를 반환
screenY 전체 모니터 스크린에서의 마우스 Y좌표 위치를 반환
shiftKey SHIFT 키가 눌려있는지의 여부를 반환
srcElement currentTarget과 같은 기능 (IE만 지원)
type 발생한 이벤트의 이름
x 이벤트 대상 객체의 부모 객체에서의 상대적 마우스 X좌표 위치를 반환 (IE만 지원)
y 이벤트 대상 객체의 부모 객체에서의 상대적 마우스 Y좌표 위치를 반환 (IE만 지원)

참고로, Opera 브라우저의 경우 키보드 이벤트에서 특정 키를 제대로 읽지 못한다.
예를들면, SHIFT, CTRL, ALT 키의 입력을 잘 인식하지 못하는 버그가 있다.
(특히 ALT키는 아예 인식을 전혀 하지 않는다고 한다)

이벤트 객체를 핸들러 함수에서 얻는 방법은 다음과 같다.

function fnHandle(oEvent)
{
  if(oEvent.type == 'click')
    alert('clicked');
}

즉, 함수에 oEvent 인자를 넣어주면 이벤트 발생시 자동으로 객체가 할당된다.

이벤트의 종류
보통 이벤트의 경우, 마우스와 키보드 이벤트가 대부분이다.
시간(timer) 또는 주기(interval) 이벤트는 관련 포스팅을 참조하기 바란다.
다음은 이벤트의 종류들을 나열한 것이다.

마우스 이벤트
click 마우스 버튼 클릭시 발생
dblclick 마우스 버튼 더블클릭시 발생
mousedown 마우스 버튼을 눌렀을 때 발생
mouseup 마우스 버튼을 눌렀다 뗐을 때 발생
mouseover 마우스 커서를 올려놓았을 때 발생
mouseout 마우스 커서를 올려놓았다가 밖으로 나갈 때 발생
mousemove 마우스 커서를 움직일 때 발생

키보드 이벤트
keydown 키보드가 눌려있을 때 발생
keyup 키보드가 눌려있다가 떼는 순간 발생
keypress 키보다가 눌리는 순간 발생

HTML 이벤트
load 페이지를 전부 다 읽어들인 후에 발생
unload 페이지로부터 빠져나갈 때 발생
abort 페이지를 읽다가 사용자의 중지 요청에 의해 중단되는 경우 발생
error 페이지를 읽다가 오류에 의해 중단되는 경우 발생
select 텍스트박스에서 사용자가 특정 문자나 문자열을 선택했을 때 발생
change 텍스트박스의 값이 변경되는 경우 발생
submit FORM에서의 submit 버튼이 클릭되는 경우 발생
reset FORM에서의 reset 버튼이 클릭되는 경우 발생
resize 윈도우(window)나 프레임(frame) 크기가 변경되는 경우 발생
scroll 스크롤바가 스크롤되는 경우 발생
focus 특정 객체(element)에 포커스가 주어지는 경우 발생
blur 특정 객체(element)에 포커스가 있다가 사라지는 경우 발생