이벤트 프로그래밍
이벤트 프로그래밍 구조
애플리케이션에서 이벤트 처리를 하기 위해서는 이벤트 소스와 이벤트 핸들러를 리스너로 연결해야 한다.
- 이벤트 소스 - 이벤트 발생 객체
- 이벤트 핸들러 - 이벤트 처리 내용
- 리스너 - 이벤트 소스와 이벤트 핸들러를 연결
이벤트 연결하는 방법
이벤트를 연결하는 방법은 다양하지만 그 이유에 대해서 알아야한다.
프로그램을 짜면서 여러가지 이벤트를 만들 것이니 그 이벤트와 이벤트 발생 객체를 연결해줘야 원하는 요소에 원하는 이벤트를 연결할 수 있다.
💡 이벤트 연결 방법 3가지
addEventListener()- 모든 이벤트DOM 노드에서 이벤트 등록 - 사용자 이벤트만- 자바스크립트에서
onXXX로 이벤트 등록
addEventListener()
이벤트 핸들러 (이벤트 콜백 함수): 이벤트 시 콜 된다는 의미로 이벤트 콜백 함수라고 불리기도 한다.
내가 직접 하는게 아니라 특정 상황이 되었을 때 콜백한다.
DOM 노드에서 이벤트 등록
화면을 구성하는 각 태그에 이벤트를 등록하고 싶다면 HTML 문서의 태그에서 직접 이벤트 핸들링을 할 수 있다.
잘 사용되지는 않는다.
자바스크립트에서
onXXX로 이벤트 등록
onXXX에서 XXX는 각 이벤트를 식별하기 위한 이름이다.
onclick- 클릭 이벤트 등록onload- 브라우저 로딩 이벤트 등록
마우스 이벤트
모든 마우스 이벤트는 이벤트 함수에 mouseEvent 타입의 객체가 전달되며, 이 객체의 정보를 이용해 이벤트가 발생한 지점의 좌표 값을 얻을 수 있다.
offsetX,offsetY- 이벤트가 발생한 DOM 노드 내에 서의 좌표pageX,pageY- 브라우저 창의 좌표
| 이벤트 종류 | 설명 | 추가 |
|---|---|---|
| click | 마우스 클릭 | ( mousedown & mouseup 합친 기능 ) |
| dbclick | 마우스 더블 클릭 | |
| mousedown | 마우스 버튼을 누르는 순간 | |
| mouseup | 마우스 버튼을 떼는 순간 | |
| mousemove | 마우스 이동 | |
| mouseenter | 마우스 포인터가 들어오는 순간 | 버블링x |
| mouseleave | 마우스 포인터가 나가는 순간 | 버블링x |
| mouseover | 마우스 포인터가 들어오는 순간 | 버블링o |
| mouseout | 마우스 포인터가 나가는 순간 | 버블링o |
💡 버블링
이벤트가 발생한DOM노드 이외에 그 상위 노드에도 이벤트가 전파되는 것
window 이벤트
| 이벤트 | 설명 |
|---|---|
| copy | 브라우저에서 복사했을 때 |
| cut | 브라우저에서 잘라내기 했을 때 |
| paste | 브라우저에서 붙여넣기 했을 때 |
| load | 브라우저에서 문서 로딩이 완료 되었을 때 |
| error | 브라우저에서 문서 로딩에 실패했을 때 |
| resize | 브라우저 창의 크기가 변경될 때 |
resize 이벤트
브라우저 창의 크기가 변경되는 순간의 이벤트이며, 이벤트 처리 함수에서 innerWidth, innerHeight로 브라우저 창의 크기를 획득할 수 있다.
Form 이벤트
HTML 문서에서 사용자 데이터를 입력받기 위해 <input>``<textarea> 등의 태그를 이용하여 이 입력 태그를 묶어서 한번에 처리 하기 위한 태그가 form이다.
form태그에 거는 이벤트 (입력 태그 전체) -submit,reset- 입력 요소에 거는 이벤트 (각 입력 태그) -
change,focus,blur
| 이벤트 | 설명 | 이벤트 구분 |
|---|---|---|
| submit | form 데이터가 제출되는 순간 | form 태그에 거는 이벤트 |
| reset | form 데이터가 reset 되는 순간 | form 태그에 거는 이벤트 |
| change | 입력 데이터가 변경되는 순간 | 입력 요소에 거는 이벤트 |
| focus | 입력 요소가 포커스를 가지는 순간 | 입력 요소에 거는 이벤트 |
| blur | 입력 요소가 포커스를 잃어버리는 순간 | 입력 요소에 거는 이벤트 |
