이벤트
- 이벤트 : 웹 브라우저에서 발생하는 특정 상황
- 이벤트 핸들러 : 특정 이벤트가 발생했을 때 실행되는 함수
이벤트 종류
- 마우스 이벤트
- click: 요소를 클릭할 때 발생
- dbclick: 요소를 더블 클릭할 때 발생
- mouseover: 요소 위로 마우스를 올렸을 때 발생
- mouserout: 요소에서 마우스를 벗어날 때 발생
- 키보드 이벤트
- keydown: 키를 눌렀을 때 발생
- keyup: 키를 뗐을 때 발생
- keypress: 키를 누르고 있는 동안 발생 (권장되지 않음)
- 폼 이벤트
- submit: 폼이 제출될 때 발생
- change: 입력 요소의 값이 변경될 때 발생
- focus: 요소가 포커스를 받을 때 발생
- blur: 요소가 포커스를 잃을 때 발생
- 문서/윈도우 이벤트
- load: 페이지가 로드될 때 발생
- resize: 창의 크기가 변경될 때 발생
- scroll: 사용자가 스크롤할 때 발생
- 예시코드
<!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>
개발자