event
- 웹 브라우저나 사용자가 행하는 어떤 동작
마우스 이벤트
- 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생
| 종류 | 설명 |
| click | 사용자가 HTML 요소를 클릭할 때 이벤트 발생 |
| dbclick | 사용자가 HTML 요소를 더블클릭할 때 이벤트 발생 |
| mousedown | 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생 |
| mousemove | 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생 |
| mouseover | 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생 |
| mouseout | 마우스 포인터가 요소를 벗어날 때 이벤트 발생 |
| mouseup | 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트 발생 |
키보드 이벤트
- 키보드에서 특정 키를 조작할 때 발생
| 종류 | 설명 |
| keydown | 사용자가 키를 누르는 동안 이벤트 발생 |
| keypress | 사용자가 키를 눌렀을 때 이벤트 발생 |
| keyup | 사용자가 키에서 손을 뗄 때 이벤트 발생 |
문서 로딩 이벤트
- 서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여주는 것과 관련된 이벤트
| 종류 | 설명 |
| abort | 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생 |
| error | 문서가 정확히 로딩되지 않았을 때 이벤트가 발생 |
| load | 문서 로딩이 끝나면 이벤트가 발생 |
| resize | 문서 화면 크기가 바뀌었을 때 이벤트가 발생 |
| scroll | 문서 화면이 스크롤되었을 때 이벤트가 발생 |
| unload | 문서에서 벗어날 때 이벤트 발생 |
폼 이벤트
- 로그인, 검색, 게시판, 설문 조사처럼 사용자가 입력하는 모든 요소를 가리키는데, 폼 요소에 내용을 입력하면서 발생하는 이벤트
| 종류 | 설명 |
| blur | 폼 요소에 포커스를 잃었을 때 이벤트 발생 |
| change | 목록이나 체크 상태 등이 변경되면 이벤트 발생 <input>, <select>, <textarea> 태그에서 사용 |
| focus | 폼 요소에 포커스가 놓였을 때 이벤트 발생 <label>, <select>, <textarea>, <button> 태그에서 사용 |
| reset | 폼이 리셋되었을 때 이벤트 발생 |
| submit | submit 버튼을 클릭했을 때 이벤트 발생 |
event handler
- 웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러 라고 함
- 가장 기본적인 방법은 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것
// 기본형
<태그 on이벤트명 = "함수명>// 버튼을 클릭하면 알림 창 표시하기
<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>
...
DOM을 이용한 이벤트 처리기
- DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결함
// 기본형
웹 요소.onclick = 함수;// 버튼 클릭해서 글자색 바꾸기
<body>
<button id ="change">글자색 바꾸기</button>
<p>Reprehenderit ... laborum quis.</p>// (...생략...)
// 방법 1: 웹 요소를 변수로 지정 & 미리 만든 함수 사용
let changeBttn = document.querySelector('#change');
changeBttn.onclick = changeColor; // 함수 이름 뒤에 괄호가 없음
function changeColor() {
document.querySelector("p").style.color = "#f00";
}
// 방법 2: 웹 요소를 따로 변수로 만들지 않고 사용
document.querySelector(#change).onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color = "#f00";
}
// 방법 3: 함수를 직접 선언
ducument.querySelector("#change").onclick = function () {
document.querySelector("p").style.color = "#f00";
}'JavaScript' 카테고리의 다른 글
| [구름톤 챌린지] 1주차_완벽한 햄버거 만들기 (0) | 2023.08.18 |
|---|---|
| [구름톤 챌린지] 1주차_프로젝트 매니징 (0) | 2023.08.17 |
| async & await (0) | 2023.06.26 |
| promise (0) | 2023.06.23 |
| callback (0) | 2023.06.22 |