DOM과 관련된 이벤트가 발생하면 이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터 등
이벤트 관련 정보가 모두 event객체에 저장됩니다.
Event 객체와 Event 타입 중 마우스, 휠 이벤트에 대해서 알아보겠습니다.
1. Event 객체
아래는 Event 객체입니다.
| Property / Method | Type | Read / Write | Explanation |
| bubbles | bool | R | 이벤트가 버블링되는지를 나타냄 |
| cancelable | bool | R | 이벤트의 기본 동작 취소가능 여부 |
| currentTarget | element | R | 현재 이벤트를 처리중인 요소 |
| defaultPrevented | bool | R | true면 preventDefault() 호출상태 |
| detail | integer | R | 이벤트와 관련된 추가정보 |
| eventPhase | integer | R | 이벤트 핸들러가 호출된 단계(1:capturing, 2:target, 3:bubbling) |
| preventDefault | function | R | 이벤트의 기본행동 취소, cancelable가 true일 때 기능 |
| stopImmediatePropagation() | function | R | event capturing, event bubbling 모두 취소하며 다른 이벤트 핸들러 호출을 막음 |
| target | element | R | 이트 타깃 |
| trusted | bool | R | 브라우저에서 생성한 이벤트라면 true 개발자가 만든 자바스크립트 이벤트라면 false |
| type | string | R | 발생한 이벤트 타입 |
| view | AbstratView | R | 이벤트와 연결된 추상화된 뷰, 이벤트가 발생한 window객체와 일치 |
2. Event 타입 - 마우스, 휠 이벤트
click
: 사용자가 클릭하거나 엔터키를 누를때 발생
dblclick
: 더블클릭 때 발생
mousedown
: 마우스 버튼을 누를때 발생합니다. 키보드에서는 발생하지 않음
mouseenter
: 마우스 커서가 요소 밖에서 안으로 이동할때 발생
mouseleave
: 마우스 커서가 요소 안에서 밖으로 이동할때 발생
mousemove
: 마우스 커서가 요소 위에서 이동하는 동안 계속 발생
mouseout
: 마우스 커서가 요소 위에 있다가 다른 요소 위로 이동할때 발생
mouseover
: 마우스 커서가 요소 밖에 있다가 요소경계안으로 이동할때 발생
mouseup
: 사용자가 마우스 버튼을 누르고 있다가 놓을 때 발생
clientX, clientY
: 이벤트가 발생한 커서 위치는 event 객체의 clientX, clientY 프로퍼티에 저장됩니다. (스크롤은 고려되지 않음)
pageX, pageY
: 뷰포트 기준으로 좌표를 반환
screenX, screenY
: 현재 모니터에 보이는 화면 전체 해상도에 대한 커서 좌표를 반환
댓글