Study/JavaScript
[JS] 06 이벤트와 이벤트 처리기
김만재
2023. 1. 26. 14:58
- 문서 로딩 이벤트
| 이벤트 | 이벤트가 발생하는 순간 |
| abort | 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 |
| error | 문서가 정확히 로딩되지 않았을 때 |
| load | 문서 로딩이 끝났을 때 |
| resize | 문서 화면의 크기가 바뀌었을 때 |
| scroll | 문서 화면이 스크롤 되었을 때 |
| unload | 문서를 벗어날 때 |
- 마우스 이벤트
| 이벤트 | 이벤트가 발생하는 순간 |
| click | 사용자가 HTML 요소를 클릭했을 때 |
| dbclick | 사용자가 HTML 요소를 더블클릭했을 때 |
| mousedown | 사용자가 요소에서 마우스 버튼을 눌렀을 때 |
| mousemove | 사용자가 요소에서 마우스 포인터를 움직일 때 |
| mouseover | 마우스 포인터를 요소 위로 옮길 때 |
| mouseout | 마우스 포인터가 요소를 벗어날 때 |
| mouseup | 요소 위에 올려놓은 마우스 버튼에서 손을 뗄 때 |
- 키보드 이벤트
| 이벤트 | 이벤트가 발생하는 순간 |
| keydown | 키를 누르는 동안 |
| keypress | 키를 눌렀을 때 |
| keyup | 키에서 손을 뗄 때 |
- 폼 이벤트
| 이벤트 | 이벤트가 발생하는 순간 |
| blur | 폼 요소에 포커스를 잃었을 때 |
| change | 목록이나 체크 상태 등이 변경되었을 때 (<input>, <select>, <textarea> 태그에서 사용) |
| focus | 폼 요소에 포커스를 놓았을 때 (<label>, <select>, <textarea>, <button> 태그에서 사용) |
| reset | 폼이 리셋되었을 때 |
| submit | [submit] 버튼을 클릭했을 때 |
- 스크립트 소스를 변경해도 HTML 마크업에는 영향을 주지 않게 하려면 이벤트 처리기도 스크립트 소스에서 처리하는 것이 좋음
- 하나의 이벤트에 여러 함수를 연결하려면 addEventListener() 메서드 사용
- event 객체
- 웹 문서에 발생하는 이벤트 정보를 저장
- 어떤 요소에서 이벤트가 발생했는지, 어떤 종류의 이벤트가 발생했는지 등의 정보가 포함됨
- event 객체의 프로퍼티와 메서드
- 웹 문서에 이벤트가 발생하면 자동으로 이벤트와 관련된 객체가 생성됨
- event 객체에는 이벤트 이름이나 발생 위치, 발생한 시간 등 이벤트와 관련된 다양한 정보가 포함
- event 객체에서 사용할 수 있는 메서드는 preventDefault() 밖에 없음
| 프로퍼티 | 기능 |
| altKey | 이벤트가 발생했을 때 Alt를 누르고 있었는지의 여부를 확인하고 Boolean값을 반환 |
| button | 마우스 키값을 반환 |
| charCode | keypress 이벤트가 발생했을 때 어떤 키가 눌렸는지 유니코드값으로 반환 |
| clientX | 이벤트가 발생한 가로 위치를 반환 |
| clientY | 이벤트가 발생한 세로 위치를 반환 |
| ctrlKey | 이벤트가 발생했을 때 Ctrl을 누르고 있었는지의 여부를 확인하고 Boolean값을 반환 |
| pageX | 현재 문서를 기준으로 이벤트가 발생한 가로 위치를 반환 |
| pageY | 현재 문서를 기준으로 이벤트가 발생한 세로 위치를 반환 |
| screenX | 현재 화면을 기준으로 이벤트가 발생한 가로 위치를 반환 |
| screenY | 현재 화면을 기준으로 이벤트가 발생한 세로 위치를 반환 |
| shiftKey | 이벤트가 발생했을 때 Shift를 누르고 있었는지의 여부를 확인하고 Boolean값을 반환 |
| target | 이벤트가 발생한 대상을 반환 |
| timeStamp | 이벤트가 발생한 시간을 밀리초 단위로 반환 |
| type | 발생한 이벤트 이름을 반환 |
| which | 키보드와 관련된 이벤트가 발생했을 때 키의 유니코드값을 반환 |
| 메서드 | 기능 |
| preventDefault | (취소할 수 있을 경우) 기본 동작을 취소 |
- 이벤트 전파 event propagation
- 웹 요소에서 이벤트가 발생했을 때 해당 요소와 해당 요소를 감싸고 있는 부모 요소 그리고 그 요소의 부모 요소에서도 똑같이 이벤트가 처리됨
- 크게 '버블링'과 '캡처링'이라는 형태로 나뉨
- 이벤트 버블링
- 특정 요소에서 이벤트가 발생했을 때, 그 이벤트가 해당 요소뿐만 아니라 그 요소의 부모 요소, 부모 요소의 부모 요소에도 똑같이 발생한 것으로 간주하는 것
- 모던 웹 브라우저에서 대부분의 이벤트는 버블링됨
- 웹 브라우저에선 기본적으로 '이벤트 버블링' 전파 방식 사용
- 이벤트 캡처링
- 웹 요소에서 이벤트가 발생하면 일단 최상위 요소에서 시작해서 이벤트가 발생한 요소까지 차례대로 이벤트가 전파되는 방식
- 버블링-아래에서 위로(자식 요소에서 부모 요소로), 캡처링-위에서 아래로(부모 요소에서 자식 요소로)