자바스크립트: 이벤트 핸들러 (Event Handler)

이벤트 핸들러는 어떤 이벤트가 발생했을 때 처리할 일을 알고 있는 코드이고 함수의 형태로 되어 있습니다. 이벤트가 발생하면 이벤트 핸들러가 실행됩니다. 콜백(Callback), 리스너(Listener)라고도 부릅니다.

이벤트 핸들러를 만드는 방법

1. 페이지 로드 이벤트를 처리할 함수를 작성합니다:

2. 페이지 로드 발생했을 때 핸들러가 호출되도록 속성과 핸들러를 연결시킵니다:

3. 이제 페이지가 로드되면 브라우저가 핸들러를 호출하게 됩니다.

이벤트 종류

위 코드에서는 onload 이벤트(페이지가 로드되는 이벤트)를 할당하는 방법을 예시로 다루었습니다. 이 외에 다른 종류의 이벤트들이 많이 있습니다.

종류설명
onabort이미지 로딩이 중단될 경우 실행됩니다.
onblur엘리먼트가 입력 포커스를 잃어버릴 경우 실행됩니다.
onchange폼 엘리먼트가 포커스를 잃고 값이 변경될 경우 실행됩니다.
onclick마우스 버튼이 눌렸다 떼어질 때 실행된다. mouseup 이벤트가 이어서 발생합니다. 기본 동작 방식을 취소하려면 false를 반환합니다.
ondblclick마우스가 더블클릭될 때 실행됩니다.
onerror이미지 로딩 오류가 일어날 경우 실행됩니다.
onfocus엘리먼트가 입력 포커스를 얻을 경우 실행됩니다.
onkeydown키가 눌렸을 때 실행됩니다. 취소하려면 false를 반환합니다.
onkeypress키가 눌렸을 때 실행됩니다. keydown 이벤트가 이어서 발생합니다. 취소하려면 false를 반환합니다.
onkeyup키에서 손을 뗐을 때 실행됩니다. keypress 이벤트가 이어서 발생합니다.
onmousedown마우스 버튼이 눌렸을 때 실행됩니다.
onmousemove마우스가 이동할 경우 실행됩니다.
onmouseout마우스가 엘리먼트에서 벗어났을 때 실행됩니다.
onmouseover마우스가 엘리먼트 위로 이동할 때 실행됩니다.
onmouseup마우스 버튼에서 손을 뗐을 때 실행됩니다.
onresize윈도우 크기가 변경될 경우 실행됩니다.
onselect텍스트가 선택됐을 때 실행됩니다.
onreset폼 초기화가 요청됐을 때 실행됩니다. 초기화를 방지하려면 false를 반환합니다.
onsubmit폼 제출이 요청됐을 때 실행됩니다. 제출을 방지하려면 false를 반환합니다.
onload문서 로딩이 완료됐을 때 실행됩니다.
onunload문서나 프레임셋이 사라졌을 때 실행됩니다.

이벤트 객체

DOM(문서객체모델)과 관련된 대부분의 이벤트는 해당 이벤트가 발생했을 때 ‘이벤트 객체‘를 전달합니다. 이벤트 객체에는 어떤 엘리먼트가 이벤트를 발생시켰는지, 언제 이벤트가 발생했는지 등의 정보가 있습니다. 클릭 이벤트의 경우에는 클릭한 지점의 좌표도 알 수 있습니다.

이벤트 객체의 속성과 의미

속성의미
target이벤트를 발생시킨 객체에 대한 참조를 가지고 있습니다. 다양한 객체를 참조할 수 있지만 대부분 엘리먼트 객체를 참조합니다.
type"click"이나 "load" 같은 문자열을 담고 있으며 무슨 일이 발생했는지 알려줍니다.
timeStamp이벤트가 언제 발생했는지 알려줍니다.
keyCode사용자가 어떤 키를 눌렀는지 알려줍니다.
clientX/clientY브라우저 창의 왼쪽 상단을 기준으로 한 마우스의 x, y 좌표입니다.
screenX/screenY컴퓨터 화면의 왼쪽 상단을 기준으로 한 마우스의 x, y 좌표입니다.
pageX/pageY브라우저가 보여주는 페이지의 왼쪽 상단을 기준으로 한 마우스의 x, y 좌표입니다.
touches(터치가 되는 디바이스를 사용할 경우) 얼마나 많은 터치가 있었는지 알려줍니다.
altKey키보드 Alt키를 누른 상태인지 true, false로 알려줍니다.
ctrlKey키보드 Ctrl키를 누른 상태인지 true, false로 알려줍니다.
button마우스의 어떤 버튼을 눌렀는지 알려줍니다. 왼쪽 버튼은 0, 가운데 버튼은 1입니다.

이벤트와 큐

브라우저는 이벤트를 ‘‘로 관리합니다. 큐에서 이벤트를 꺼낸 후 해당 이벤트를 처리할 핸들러가 있으면 그 핸들러를 호출해 처리하게 됩니다.

하지만 한 번에 하나의 이벤트만 처리하기 때문에 이벤트 핸들러는 되도록 짧고 간결해야 합니다. 그렇지 않을 경우 이벤트 큐가 꽉 차게 되고 어플리케이션의 속도가 느려집니다.