이벤트 처리하기

이벤트란 GUI 환경에서 웹 문서 내 사용자의 어떠한 동작을 말합니다.
주요 이벤트로는 마우스 이벤트, 키보드 이벤트, 문서 로딩 이벤트, 폼 이벤트 등이 있습니다.

이벤트의 종류

마우스 이벤트

종류	설명
click	사용자가 html 요소를 클릭할 때 이벤트가 발생합니다.
dbclick	사용자가 html 요소를 더블 클릭할 때 이벤트가 발생합니다.
mousedown	사용자가 요소 위에서 마우스를 누른 시점에 이벤트가 발생합니다.
mouseup	사용자가 요소 위에서 마우스를 누르고 뗀 시점에 이벤트가 발생합니다.
mousemove	사용자가 요소 위에서 마우스를 움직일 때 이벤트가 발생합니다.
mouseover	사용자가 요소 위에 마우스 커서를 올릴 때 이벤트가 발생합니다.
mouseout	사용자가 요소 위에서 마우스 커서가 벗어날 때 이벤트가 발생합니다.

💡이벤트 중첩
위 처럼 마우스 이벤트에는 click이벤트를 처리하려했는데, mousedown, mouseup이벤트도 사실상 같이 일어나는 상황이 발생할 수 있습니다. 해당 이벤트 간의 관계와 작동 구조를 정확히 이해하는 것이 중요합니다.

키보드 이벤트

종류	설명
keydown	사용자가 키를 누르는 동안 이벤트가 발생합니다.
keypress	사용자가 키를 눌렀을 때 이벤트가 발생합니다.
keyup	사용자가 키를 누르고 뗄 때 이벤트가 발생합니다.

문서로딩 이벤트

종류	설명
abort	문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생합니다.
error	문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
load	문서가 로딩이 끝나면 이벤트가 발생합니다.
resize	문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다.
scroll	문서 화면이 스크롤되었을 때 이벤트가 발생합니다.
unload	문서에서 벗어날 때 이벤트가 발생합니다.

폼 이벤트

종류	설명
focus	폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다.
blur	폼 요소에 포커스를 잃었을 때 이벤트가 발생합니다.
change	목록이나 체크 상태 등이 변경되면 이벤트가 발생합니다.
reset	폼이 리셋되었을 때 이벤트가 발생합니다.
submit	폼이 제출(submit)되었을 때 이벤트가 발생합니다.

이벤트 객체

웹 문서에서 발생한 이벤트에 대한 정보에 대한 프로퍼티와 메서드를 활용할 수 있는 객체 입니다.

이벤트 객체의 프로퍼티 또는 메서드의 경우 해당 이벤트가 발생한 경우에만 정보를 반환 또는 메서드를 사용할 수 있습니다. 이벤트가 일어난 요소에 해당 프로퍼티, 객체를 사용합니다.

이벤트 프로퍼티

프로퍼티 명	설명	사용법
type	발생한 이벤트의 이름을 반환합니다.	이벤트요소.type
target	이벤트가 발생한 대상을 반환합니다.	이벤트요소.target
timeStamp	이벤트가 발생한 시간을 반환합니다.	이벤트요소.timeStamp
button	요소가 클릭되었을 때(click, mousedown, mouseup) 눌린 마우스 버튼의 키값을 반환합니다. 값 : 0: 좌클릭 / 1: 휠 버튼 또는 중간 버튼(있는 경우) / 2: 우클릭	이벤트요소.button
which	키보드와 관련된 이벤트가 발생했을 때 키의 코드를 유니코드값으로 반환합니다.	이벤트요소.which
charCode	keyPress 이벤트가 발생할 때 어떤 키가 눌렸는지 유니코드 값으로 반환합니다.	이벤트요소.chartCode
altKey	이벤트가 발생할 때 alt키가 눌렸는지 여부를 boolean 값으로 반환합니다.	이벤트요소.altKey
ctrlKey	이벤트가 발생할 때 ctrl키가 눌렸는지 여부를 boolean 값으로 반환합니다.	이벤트요소.ctrlKey
shiftKey	이벤트가 발생할 때 shift키가 눌렸는지 여부를 boolean 값으로 반환합니다.	이벤트요소.shiftKey
clientX	이벤트가 발생한 가로위치를 반환합니다.	이벤트요소.clientX
clientY	이벤트가 발생한 세로위치를 반환합니다.	이벤트요소.clientY
pageX	현재문서 기준으로 이벤트가 발생한 가로위치를 반환합니다.	이벤트요소.pageX
pageY	현재문서 기준으로 이벤트가 발생한 세로위치를 반환합니다.	이벤트요소.pageY
screenX	현재 화면 기준으로 이벤트가 발생한 가로위치를 반환합니다.	이벤트요소.screenX
screenY	현재 화면 기준으로 이벤트가 발생한 세로위치를 반환합니다.	이벤트요소.screenY

이벤트 메서드

메서드 명	설명	사용법
preventDefault()	이벤트를 최소할 수 있는 경우에 취소합니다.	이벤트요소.preventDefault()

이벤트 처리기

이벤트 처리기, 이벤트 핸들러 라고도 하며, 요소에 특정 이벤트가 발생하면 함수를 실행시키는 것을 말합니다.

이벤트 처리기는 아래의 다양한 방법이 있으며, 상황에 맞게 적절한 방식을 사용해야합니다.

• html 요소내 인라인 요소로 등록
• DOM 요소에 함수 직접 연결
• addEventListener()메서드 이용

1. html 인라인 요소로 처리

html 요소에 직접 속성으로on이벤트명="함수() 또는 메서드()"로 사용할 수 있습니다.

다만, 이렇게 작성할 경우 수정 시 웹 문서를 다 돌아다니면서 수정해야한 다는 점 등에서 유지보수 관리가 어렵다는 단점이 있어 권장되는 방법은 아닙니다.

<div>
  <!--사용법-->
  <p on이벤트명="함수명() | 메서드명()">내용</p>
  
  <!--사용예시-->
  <p onclick="alert('요소가 클릭되었습니다.')">예시내용</p>
</div>

2. DOM 요소에 함수 직접 연결

JS 내에서 요소를 선택 후 해당 요소에 직접 이벤트를 연결해주는 방식입니다.

on이벤트명 = 함수명으로 사용할 수 있습니다.
이때, 함수명()이 아니라 함수명으로 괄호를 생략하는 점을 유의해야합니다. 또는 익명함수를 활용할 수 있습니다.

// 사용법
선택요소.on이벤트명 = 함수명(또는 익명함수 사용가능);

// 사용예시
const element = document.getElementById('id명');
function showAlert() {
	alert('요소가 클릭되었습니다.');
}

element.onclick = showAlert;

3. addEventListener()메서드 이용

JS 내에서 요소를 선택 후 해당 요소에 addEventListener()를 이용해 이벤트 처리기를 연결하는 방식 입니다.

선택요소.addEventListener('이벤트명', 함수명)으로 사용할 수 있습니다.
이때, 함수명()이 아니라 함수명으로 괄호를 생략하는 점을 유의해야합니다. 또는 익명함수를 활용할 수 있습니다.

// 사용법
선택요소.addEventListener('이벤트명', 함수명);

// 사용예시
const element = document.getElementById('id명');
function showAlert() {
	alert('요소가 클릭되었습니다.');
}

element.addEventListener('click', showAlert);

참고

Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!