- 이벤트 : 버튼을 클릭하거나 항목을 선택하는 것
- 이벤트 처리기 : 이벤트가 발생했을 때 처리하는 함수
- 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결
- <태그 on 이벤트명 = "함수명">
1. 마우스 이벤트
| 종류 | 설명 |
| click | 사용자가 HTML 요소를 클릭할때 이벤트 발생 |
| dbclick | 사용자가 HTML 요소를 더블클릭할때 이벤트 발생 |
| mousedown | 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생 |
| mousemove | 사용자가 요소 위에서 마우스 포인터를 움직일때 이벤트 발생 |
| mouseover | 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생 |
| mouseout | 마우스 포인터가 요소를 벗어날 때 이벤트 발생 |
| mouseup | 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗼 때 이벤트 발생 |
2. 키보드 이벤트
| 종류 | 설명 |
| keydown | 사용자가 키를 누르는동안 이벤트 발생 |
| keypress | 사용자가 키를 눌렀을때 이벤트 발생 |
| keyup | 사용자가 키에서 손을 뗄 때 이벤트 발생 |
3. 문서 로딩 이벤트
| 종류 | 설명 |
| abort | 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생 |
| error | 문서가 정확히 로딩되지 않았을 때 이벤트가 발생 |
| load | 문서 로딩이 끝나면 이벤트가 발생 |
| resize | 문서 화면 크기가 바뀌었을 때 이벤트가 발생 |
| scroll | 문서 화면이 스크롤 되었을 때 이벤트가 발생 |
| unload | 문서에서 벗어날 때 이벤트가 발생 |
4. 폼 이벤트
| 종류 | 설명 |
| blur | 폼 요소에 포커스를 잃었을 때 이벤트가 발생 |
| change | 목록이나 체크상태 등이 변경되면 이벤트가 발생 <input>, <select>, <textarea>태그에서 사용 |
| focus | 폼 요소에 포커스가 놓였을 때 이벤트가 발생 <label>,<select>,<textarea>,<button> |
| reset | 폼이 리셋되었을 때 이벤트 발생 |
| submit | submit 버튼을 클릭했을 때 이벤트가 발생 |
-버튼을 클릭하면 알림창 표시하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼을 클릭하면 알림창 표시하기 </title>
<style>
ul {
list-style-type:none;
}
li{
border:1px dotted gray;
float:left;
width:100px;
height:20px;
padding:20px;
}
</style>
</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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼을 클릭하면 배경색 바꾸기</title>
<style>
a:link, a:visited { /*방문한 링크와 방문하지 않은 링크 설정*/
color:black;
text-decoration:none; /*텍스트의 줄을 표시하지 않음*/
}
ul {
list-style:none;
width:500px;
margin:10px auto;
padding:0;
}
li {
display:inline-block; /*인라인 요소와 블록레벨 요소 모두 가짐 , 패딩 마진 지정 가능*/
width:120px;
border:1px solid #ccc;
padding:10px 15px;
font-size:16px;
text-align:center;
}
#result {
width:500px;
height:300px;
margin:30px auto;
border:2px solid #ccc;
border-radius:15px;
}
p {
width:80%;
padding:10px;
line-height:2em;
}
</style>
</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.background=color;
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 15장 - DOM을 이용한 이벤트 처리기 (0) | 2023.04.08 |
|---|---|
| 15장 실습 2 (0) | 2023.04.07 |
| 15장 - 익명 함수/ 즉시 실행 함수/ 화살표 함수 (0) | 2023.04.07 |
| 15장 실습 (0) | 2023.04.07 |
| 15장 - 재사용할 수 있는 함수 만들기 (0) | 2023.04.07 |
