Event
Event의 종류
D_Event >> a#_~.html| NO | 분류 | 이벤트 명 | 설명 |
|---|---|---|---|
| 1 | 마우스 | click | 클릭 되었을 때 |
| dbclick | 더블 클릭 되었을 때 | ||
| mouseover | 마우스가 객체 영역 위로 들어올 때 | ||
| mouseout | 마우스가 객체 영역 밖으로 나갈 때 | ||
| mousedown | 마우스 버튼을 클릭하는 순간 | ||
| mouseup | 마우스 클릭했던 버튼을 올리는 순간 | ||
| mousemove | 마우스가 객체위를 이동할 때마다 | ||
| contextmenu | 좌클릭메뉴가 나타나는 순간 | ||
| 2 | 키보드 | keydown | 키보드가 눌려있는 순간=keypress |
| keyup | 눌렸던 키보드가 떨어지는 순간 | ||
| keypress | 키가 눌려있는 동안 | ||
| 3 | 객체 | focus | 선택되었을 때 |
| blur | 선택된 것이 해제되었을 때 | ||
| change | 값이 변경되었을 때 | ||
| submit | submit이벤트(서버로 전송)를 발생시켰을 때(초기화 및 새로고침) | ||
| reset | reset이벤트(폼에 있는 데이터 초기화)를 발생시켰을 때 | ||
| select | 내용을 드레그 등으로 선택했을 때 | ||
| 4 | window | load | 페이지을 처음 읽을 때 |
| abort | 이미지나 비디오 등의 로딩 중단(찾을 수 없음, 코드 에러 X) | ||
| resize | 페이지의 크기를 변경 할 때 | ||
| scroll | 스크롤 할 때(페이지 내리기 등) |
로딩 이벤트
페이지 요소를 불러오는 코드의 경우, 잘 동작하는 코드임에도 불구하고, 로딩되는 순서로 인해 대상이 아직 생성되지 않으면서 에러가 날 수 있습니다. 이를 방지하기 위해 페이지 로딩 완료 이벤트 이후에 수행하도록 할 수 있습니다.
document.addEventListener('DOMContentLoaded', () => {
...
});
다른 방법으로는 script선언시에 async, defer, module등을 이용하여로 구분할 수 있습니다.
아래 그림에서 parser, fetch, excution은 모두
컴퓨터의 리소스를 차지하는 행위입니다. 사용자는 어쨌든 완전한 문서를 보기 위해서 끝까지 기다려야 합니다.
parser와 excution는 절대 동시에 수행될 수 없지만, 예비동작인 fetch는 비동기식으로 동작 할 수 있습니다.
- defer옵션은 준비는 비동기식으로 하되, 수행은 HTML의 해석이 끝난 후에 시작하라고 지정 합니다.
- async옵션은 준비가 끝나는대로 수행을 할 것을 요청합니다.(성능 개선을 목적으로)
- module은 여러 script간에 순차적(동기식)으로 진행을 하되 결과는 HTML이 준비 된 후에 수행합니다.
- module을 async로 수행할 수 있습니다.
defer, async, module비교
"asyncdefer.svg", html.spec.whatwg.org (CC BY 4.0)
등록 및 사용
D_Event >> b_addremove.html| 함수명 | 역할 |
|---|---|
| addEventListener(이벤트명, 수행 함수) | 이벤트 등록 |
| removeEventListener(이벤트명, 삭제 함수) | 이벤트 말소 |
| dispatchEvent(이벤트 객체) | 이벤트 발생 |
이벤트 전달
아래 예에서 5를 클릭하면 5 → 4 → 3 → 2 → 1의 클릭 이벤트를 순서대로 모두 수행합니다.
이벤트의 전달을 중지하기 위해서 다음과 같은 함수를 사용합니다.
| 함수명 | 동작 |
|---|---|
| preventDefault | 기본 동작을 중지합니다. |
| stopPropagation | 전달을 중지합니다. |
좌표
x좌표는 좌에서 우(→), y좌표는 상에서 하(↓)로 증가합니다. 모든 객체가 0, 0에 위치하지 않음으로, 객체는 이벤트의 위치가 절대적인 위치(문서기준)과 상대적인 위치(본인기준)을 갖습니다.
| 속성 명 | 설명 | 계산 |
|---|---|---|
| OBJ.offsetLeft, OBJ.offsetTop | 본인의 위치 | |
| e.pageX, e.pageY | 이벤트 위치(문서 기준) | |
| e.offsetX, e.offsetY | 이벤트 위치(본인 기준) | = 이벤트 위치(문서기준) - 본인의 위치 |
| window.pageXOffset, window.pageYOffset | 현재 스크롤 위치 | |
| e.clientX, e.clientY e.x, e.y |
이벤트 위치(브라우저 기준) | = 이벤트 위치(문서 기준) - 스크롤 |
| e.screenX, e.screenY | 이벤트 위치(모니터 기준) | * 멀티모니터의 경우, 기준모니터의 좌상단 |
pageXY =
계산 후 =
타이머
타이머는 미리 설정해 둔 시간 이후에 이벤트(함수)가 호출되도록 할 수 있습니다.
| 수행 | 함수명 |
|---|---|
| 설정 | 헨들러 = setInterval(수행함수, ms밀리초); // 매 주기마다 헨들러 = setTimeout(수행함수, ms밀리초); // 1회용 |
| 해제 | clearInterval(헨들러); clearTimeout(헨들러); |