jQuery 이벤트

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 이벤트 객체에서는 통일되게 다룰 수 있게 함