이벤트 종류(UI Interaction Events)
| 분류 | 이벤트 명칭 | 비고 |
| 마우스 | - click - dbclick - contextmenu(우클릭) - mousedown - mouseup - mouseenter - mouseleave - mouseover - mouseout - mousemove |
mouseenter/leave가 over/out보다 버블링 문제가 적어 권장 |
| 키보드 | - keydown - keypress - keyup |
현대 웹에선 keydown이 주로 쓰임 |
| 폼 | - blur - focus - focusin - focusout - change - select - submit |
blur/focus는 버블링이 안 되고, in/out은 됨 |
| 브라우저 | - load - unload - resize - scroll - error - ready |
ready는 DOM 완성 시점 |
이벤트 메서드
| 메서드명 | 비고 |
| .on() | 모든 이벤트 바인딩의 표준 |
| .off() | on()으로 건 이벤트를 해제 |
| .one() | 한 번만 실행되고 자동으로 해제되는 이벤트 |
| .trigger() | 이벤트를 강제 발생 |
| .triggerHandler() | 브라우저 기본 동작 및 버블링 방지 |
| .hover() | mouseenter와 mouseleave를 동시 처리 |
이벤트 객체
| 속성(Properties) | 비고 |
| target | 실제로 이벤트가 발생한 대상 요소 |
| currentTarget | 이벤트를 처리하고 있는 현재 요소 |
| type | 이벤트 이름 |
| which | 입력된 키나 마우스 버튼의 번호 |
| pageX / pageY | 전체 문서 기준 마우스 좌표 |
| metaKey / ctrlKey / shiftKey | 특수키가 눌렸는지 여부 |
| data | .on()으로 넘겨준 사용자 데이터 |
| timestamp | 이벤트 발생 시간 |
| 메서드(Methods) | 비고 |
| preventDefault() | 브라우저의 기본 동작을 취소 |
| stopPropagation() | 부모 요소로 이벤트가 퍼지는 것을 중단 |
| stopImmediatePropagation() | 다른 핸들러 실행까지 모두 즉시 중단 |
| isDefaultPrevented() | preventDefault()가 호출되었는지 확인 |