이벤트
이벤트란 웹 브라우저나 사용자가 행하는 어떠한 동작, 예를 들어 키보드에서 키를 누르는 것, 웹 브라우저에서 새로운 페이지를 불러오는 것 등
마우스 이벤트
- click - HTML요소를 클릭할 때
- dbclick - HTML요소를 더블 클릭할 때
- mousedown - 사용자가 요소 위에서 마우스 버튼을 눌렀을 때
- mousemove - 사용자가 요소 위에서 마우스 포인터를 움직일 때
- mouseover - 마우스 포인터가 요소 위로 옮겨질 때
- mouseout - 마우스 포인터가 요소를 벗어날 때 이벤트 발생
- mouseup - 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때
키보드 이벤트
- keydown - 사용자가 키를 누르는 동안 이벤트 발생
- keypress - 사용자가 키를 눌렀을 때
- keyup - 사용자가 키에서 손을 뗄 때
문서 로딩 이벤트
- abort - 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생
- error - 문서가 정확히 로딩되지 않았을 때
- load - 문서 로딩이 끝나면 이벤트가 발생
- resize - 문서 화면 크기가 바뀌었을 때
- scroll - 문서 화면이 스크롤되었을 때
- unload - 문서에서 벗어날 때
폼 이벤트
- blur - 폼 요소에 포커스를 잃었을 때
- change - 목록이나 체크 상태 등이 변경되면 이벤트 발생
- focus - 폼 요소에 포커스가 놓였을 때 이벤트 발생
- reset - 폼이 리셋되었을 때
- submit - submit 버튼을 클릭했을 때 이벤트가 발생
이벤트 처리기
버튼 클릭 이벤트 예제
버튼을 클릭하면 알림 창 표시하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트</title>
<link rel="stylesheet" href="css/function.css">
</head>
<body>
<ul>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
</ul>
<div id="result"></div>
</body>
</html> 버튼을 클릭하면 배경색 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트</title>
<link rel="stylesheet" href="css/function.css">
</head>
<body>
<ul>
<li><a href="#" onclick="changeBg('green')">Green</a></li>
<li><a href="#" onclick="changeBg('orange')">Orange</a></li>
<li><a href="#" onclick="changeBg('purple')">Purple</a></li>
</ul>
<div id="result"></div>
<script>
function changeBg(color) {
var result = document.querySelector('#result');
result.style.backgroundColor = color;
}
</script>
</body>
</html> 이미지 상세 설명 보기 버튼 클릭 이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트</title>
<link rel="stylesheet" href="css/function.css">
</head>
<body>
<ul>
<li><a href="#" onclick="changeBg('green')">Green</a></li>
<li><a href="#" onclick="changeBg('orange')">Orange</a></li>
<li><a href="#" onclick="changeBg('purple')">Purple</a></li>
</ul>
<div id="result"></div>
<script>
function changeBg(color) {
var result = document.querySelector('#result');
result.style.backgroundColor = color;
}
</script>
</body>
</html> 
Sang9riG9ru