반응형
자바스크립트 이벤트?
자바스크립트로 이벤트 프로그램을 개발하다보면 이벤트 함수가 스스로 실행되는 경우는 많지 않습니다. 예를들어 사용자가 버튼을 누르거나 목록에서 항목을 선택해서 그에 맞는 함수가 실행되도록 프로그램을 개발하는 경우가 많습니다. 여기서 사용자가 동작 하는 것이 이벤트(event)라고 하며, Web개발을 하면서 필요한 대표적인 이벤트를 정리해보겠습니다.
반응형
자바스크립트 이벤트는 주로 마우스나 키보드를 사용할때, 웹 문서를 불러올 때, 폼(Form)에 내용을 입력할 때 주로 발생합니다. 주요 이벤트는 다음과 같습니다
1. 마우스 이벤트
| 속성 | 설명 |
| click | 사용자가 HTML 요소를 마우스로 눌렀을 때 이벤트가 발생합니다. |
| dblclick | 사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트가 발생합니다. |
| mousedown | 사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트가 발생합니다. |
| mousemove | 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생합니다. |
| mouseover | 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다. |
| mouseout | 마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다. |
| mouseup | 사용자가 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트가 발생합니다. |
2. 키보드 이벤트
| 속성 | 설명 |
| keypress | 사용자가 키를 눌렀을 때 이벤트가 발생합니다. |
| keydown | 사용자가 키를 누르는 동안 이벤트가 발생합니다. |
| keyup | 사용자가 키에서 손을 뗄 때 이벤트가 발생합니다. |
3. 문서 로딩 이벤트
| 속성 | 설명 |
| abort | 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생합니다. |
| error | 문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다. |
| load | 문서 로딩이 끝나면 이벤트가 발생합니다. |
| resize | 문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다. |
| scroll | 문서 화면이 스크롤되었을 때 이벤트가 발생합니다. |
| unload | 문서를 벗어날 때 이벤트가 발생합니다. |
4. 폼 이벤트
| 속성 | 설명 |
| blur | 폼 요소에 포커스를 잃었을 때 이벤트가 발생합니다. |
| change | 목록이나 체크상태 등이 변경되었을 때 이벤트가 발생합니다(<input>,<select>,<textarea>,<button> 태그에서 사용합니다). |
| focus | 폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다(<input>,<select>,<textarea>,<button> 태그에서 사용합니다). |
| reset | 폼이 다시 시작되었을 때 이벤트가 발생합니다. |
| submit | submit 버튼을 눌렀을 때 이벤트가 발생합니다. |
[예시]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<button id="btn1" onclick="alert('눌렀습니다.')">테스트 버튼</button>
</body>
</html>위에 예시처럼 이벤트가 발생했을 때 어떤 함수를 실행해야 할지 웹 브라우저에게 알려주어야 합니다. 이때 연결해 주는 것을 이벤트 핸들러(Event Handler)라고 하며, 이벤트 앞에 on을 붙여 사용합니다.
[참고서적]
Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편
COUPANG
www.coupang.com
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
반응형
'💻 IT > 📌 WEB' 카테고리의 다른 글
| [HTML] 입력에 필요한 input 태그 정리 (0) | 2022.02.22 |
|---|---|
| [Javascript] 브라우저 객체모델 (BOM) 이란? (10) | 2022.02.21 |
| [javascript] Date 객체 주요 함수 정리 (0) | 2022.02.21 |
| (HTML)XHTML 이란? (0) | 2020.11.29 |
| (XML)CDATA 란? (0) | 2020.11.29 |