JavaScript에서 이벤트(Event)는 웹 페이지에서 사용자의 행동이나 특정 상황을 감지하여, 이에 반응하는 방식으로 동작합니다. 예를 들어, 버튼을 클릭하거나, 입력 필드에 텍스트를 입력하거나, 페이지가 로드될 때 특정 동작을 수행할 수 있습니다. 이벤트는 웹 페이지에 상호작용을 추가하는 중요한 요소로, JavaScript가 사용자와의 상호작용을 처리하는 핵심입니다.
1. 이벤트의 기본 개념
이벤트는 웹 브라우저에서 발생하는 특정 상황을 의미합니다. 각 이벤트는 특정 동작에 반응하도록 설정된 이벤트 핸들러(Event Handler) 또는 이벤트 리스너(Event Listener)를 통해 처리됩니다.
- 이벤트(Event): 사용자의 상호작용이나 페이지의 상태 변화(클릭, 키보드 입력, 로딩 등)입니다.
- 이벤트 핸들러(Event Handler): 특정 이벤트가 발생했을 때 실행되는 함수입니다.
2. 자주 사용하는 이벤트 유형
다양한 이벤트 유형이 있으며, 주요 이벤트는 다음과 같습니다.
- 마우스 이벤트
click: 요소를 클릭할 때 발생dblclick: 요소를 더블 클릭할 때 발생mouseover: 요소 위로 마우스를 올렸을 때 발생mouseout: 요소에서 마우스를 벗어날 때 발생
- 키보드 이벤트
keydown: 키를 눌렀을 때 발생keyup: 키를 뗐을 때 발생keypress: 키를 누르고 있는 동안 발생 (권장되지 않음)
- 폼(Form) 이벤트
submit: 폼이 제출될 때 발생change: 입력 요소의 값이 변경될 때 발생focus: 요소가 포커스를 받을 때 발생blur: 요소가 포커스를 잃을 때 발생
- 문서/윈도우 이벤트
load: 페이지가 로드될 때 발생resize: 창의 크기가 변경될 때 발생scroll: 사용자가 스크롤할 때 발생
3.1 HTML 속성에 직접 지정
HTML 요소에 onclick, onmouseover 등의 이벤트 속성을 사용해 직접 이벤트를 설정할 수 있습니다.
3.2 JavaScript에서 이벤트 리스너 등록
JavaScript 코드에서 addEventListener 메서드를 사용하여 이벤트 리스너를 추가할 수 있습니다. 이 방식은 재사용성과 유지보수 측면에서 더 좋으며, 요소에 여러 개의 이벤트 리스너를 추가할 수 있습니다.
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// func 함수 선언: 호출 시 "func 호출"을 콘솔에 출력
const func = function () {
console.log('func 호출');
};
</script>
<script type="text/javascript">
// func(); // 페이지 로드 시 호출하지 않고, 이벤트에 의해 호출되도록 설정
// 특정 조건(디자인적인 이벤트)에 의해 func 함수 호출 예제
// 예: 마우스 클릭, 키보드 입력 등
</script>
</head>
<body>
<!-- 버튼을 클릭하면 func 함수 호출 -->
<input type="button" value="나 클릭" onclick="func()" /><br />
<!-- 마우스를 버튼 위에 올리면 func 함수 호출 -->
<input type="button" value="마우스 오버" onmouseenter="func()" /><br />
<br />
<!-- 링크 클릭 시 func 함수 호출 -->
<a href="javascript:func()">나 클릭</a><br />
<!-- 이미지 클릭 시 func 함수 호출 -->
<a href="javascript:func()"><img src="../tomcat.svg" alt="Tomcat 이미지" /></a><br />
</body>
</html>