1. jQuery 표준 이벤트
ㅇ on(), off() : jQuery 1.7 부터 추가됨
- on() : 이벤트 연결, 이벤트 위임 처리
. 사실상, on() 메서드 하나로도 모든 이벤트 메소드들을 수용 가능
.. on()은, 이벤트 연결 이외에도 이벤트 위임도 지원 가능
. 문법 : $().on(eventtype, selector, eventData, handlerFunction)
.. eventtype에 공백을 두고 다수 지정도 가능 (하나의 요소에 여러 이벤트 연결 가능)
.. selector,eventData는 선택적(없을 수 있음)
. 例) $(요소).on("click", function() { })
* 이벤트 위임 이란?
. 상위 요소에 이벤트를 연동시키는 것
.. 하위 요소에 각각 이벤트를 붙이지 않고,
.. 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식
- off() : 이벤트 해제
. 문법 : $().off(eventtype, handlerFunction)
.. 파라미터 없으면, 선택된 요소의 모든 이벤트 연결 해제
.. 특정 이벤트 타입에 여러 등록된 이벤트 핸들러들을 연결 해제
ㅇ bind(), unbind()
- bind() : 이벤트 연결 만 가능
. 문법 : 위 on()과 같음
- unbind() : 이벤트 제거
ㅇ delegate() : 이벤트 위임
- (하나의 요소에 대한 이벤트 핸들러로써 여러 임무 동시 수행 가능)
ㅇ one(eventtype, handlerFunction)
- 이벤트 연결을 한번 만 수행 (호출 후 자동으로 해제)
2. jQuery 단축 이벤트 ☞ 자바스크립트 이벤트 종류 참조
ㅇ 문서 로딩 이벤트
- ready() : 문서 로딩 (이미지,동영상 등이 아닌 단지 html 문서 만 불러왔음을 알림)
. 즉, body 태그 내 모든 코드를 읽은 후, DOM이 사용가능할 때, 호출되는 onload 기능 임
. 사용 例)
.. $(document).ready( function() { } );
.. 또는, $( function() { } );
.. 또는, $( () => {} ); // 화살표 함수에 의한 단축형 표현
- load() : 전체 로딩 (네트워크를 통해 해당 문서의 모든 리소스까지도 불러왔음을 알림)
. 사용 例)
.. $(document).load();
.. 선택 요소에 특정 URL 파일 로딩시, $(선택).load(URL, 익명 함수 또는 콜백 함수)
ㅇ 브라우저 이벤트
- resize() : 브라우저 크기조절 이벤트
- scroll() : 브라우저 스크롤 이벤트
ㅇ 마우스 이벤트
- click() : 해당 요소를 클릭
. 例) $(요소).click( function() { } )
- dbclick() : 해당 요소를 더블 클릭
- mouseenter() : 마우스 포인터가 해당 요소로 진입
- mouseleave() : 마우스 포인터가 해당 요소 밖으로 벗어남
- mouseover() : 마우스가 해당 요소 위로 움직일 때
- mouseout() : 마우스가 해당 요소 밖으로 움직일 때
- hover() : 위 둘(mouseover,mouseout)을 동시에 고려함
. $().hover(f1,f2); // 요소 위에서는 함수 f1 실행, 요소 밖에서는 함수 f2 실행
- mouseup() : 마우스 버튼에서 손을 땜
- mousedown() : 마우스 버튼을 누름
- mousemove() : 마우스 포인터가 이동 함
. 마우스 커서가 해당 요소내를 움직일 때 또는 커서의 위치 확인에 유용함
- focusin()
- focusout()
ㅇ 키 이벤트
- keydown() : 키를 누름
- keyup() : 키에서 손을 땜
- keypress() : 키를 눌러 문자가 연결되었을 때
. (즉, 화면에 글자가 완성되는 경우 만) (누르고있는 동안 계속 발생)
ㅇ 폼 이벤트
- blur() : 포커스를 잃을 때
- focus() : 포커스를 얻을 때
- submit() : 폼 전송
- change() : 폼 필드에서 요소 값 변경 (input,select,textarea 등)
- select() : 텍스트 상자/영역 등에서 영역을 선택
※ jQuery 이벤트 사용 例) $(요소).click( function() { } )
- 한편, 전달 파라미터를 비워두면, 해당 이벤트를 직접 발생시킴
3. jQuery 이벤트 객체 ☞ 자바스크립트 이벤트 객체 참조
ㅇ 프로퍼티
- altKey, attrChange, attrName, bubbles, button, cancelable, charCode, clientX, clientY,
ctrlKey, currentTarget, detail, eventPhase, fromElement, keyCode, layerX, layerY,
metaKey, newValue, offsetX, offsetY, originalTarget, pageX, pageY, prevValue,
relatedNode, relatedTarget, screenX, screenY, shiftKey, srcElement, target, toElement,
view, wheelDelta, which
ㅇ 메소드
- preventDefault(), stopPropagation(), stopImmediatePropagation(),
isDefaultPrevent(), isPropagationStopped(), isImmediatePropagationStopped()
※ 웹브라우저 마다 다르게 구현된 차이점을,
- jQuery 이벤트 객체에서는 통일되게 다룰 수 있게 함