jQuery 이벤트

(2018-02-01)
1. jQuery 이벤트 관련                                      ☞ 자바스크립트 이벤트 종류 참조

  ㅇ 문서 로딩 이벤트
     - ready() : 문서 로딩 (이미지,동영상 등이 아닌 단지 html 문서 만 불러왔음을 알림)
        . 즉, body 태그 내 모든 코드를 읽은 후 호출되는 onload 기능 임
        . 사용 例) $(document).ready( function() { } );
           .. 또는 간략히, $( function() { } ); 

     - load()  : 파일 로딩 (네트워크를 통해 해당 문서의 모든 리소스까지도 불러왔음을 알림)
        . 사용 例) $(document).load();
        . 사용 例) $(선택).load(URL, 익명 함수 또는 콜백 함수);
           .. 특정 URL에 대한 파일 로딩

  ㅇ 브라우저 이벤트
     - resize() : 브라우저 크기조절 이벤트
     - scroll() : 브라우저 스크롤 이벤트

  ㅇ 마우스 이벤트
     - click()      : 해당 요소를 클릭
     - dbclick()    : 해당 요소를 더블 클릭
     - mouseenter() : 마우스 포인터가 해당 요소로 진입
     - mouseleave() : 마우스 포인터가 해당 요소 밖으로 벗어남
     - mouseover()  : 마우스가 해당 요소 위로 움직일 때
     - mouseout()   : 마우스가 해당 요소 밖으로 움직일 때
     - mouseup()    : 마우스 버튼에서 손을 땜
     - mousedown()  : 마우스 버튼을 누름
     - mousemove()  : 마우스 포인터가 이동 함
        . 마우스 커서가 해당 요소내를 움직일 때 또는 커서의 위치 확인에 유용함
     - hover()      : 위 둘(mouseover,mouseout)을 동시에 고려함
        . $().hover(f1,f2); // 요소 위에서 f1 실행, 요소 바깥 f2 실행
     - focusin()
     - focusout()

  ㅇ 키 이벤트
     - keydown()  : 키를 누름
     - keyup()    : 키에서 손을 땜
     - keypress() : 키를 눌러 문자가 연결되었을 때 
        . (즉, 화면에 글자가 완성되는 경우 만) (누르고있는 동안 계속 발생)

  ㅇ 폼 이벤트
      - blur()  : 포커스를 잃을 때
     - focus()  : 포커스를 얻을 때
     - submit() : 폼 전송
     - change() : 폼 필드에서 요소 값 변경 (input,select,textarea 등)
     - select() : 텍스트 상자/영역 등에서 영역을 선택

  ㅇ 기본 이벤트
     * 요소에 개발자가 이벤트를 연결하지 않았음에도 기본적으로 실행되는 이벤트
        . a 요소를 클릭 => 해당 경로로 페이지 이동
        . 브라우저 화면에서 우측 마우스 버튼을 클릭 => ContextMenu 나타남
        . form 요소 내부의 submit 버튼을 클릭 => 지정된 경로로 내용을 전송
2. 이벤트 연결,처리,위임

  ㅇ 단축 이벤트 메서드 : 위 1.항의 이벤트 메소드들을 말함
     - 例) $(요소).clink( function() { } )
     - 위 1.항의 이벤트 메소드들 각각에 전달 파라미터를 비워두면, 해당 이벤트를 발생시킴

  ㅇ 표준적인 이벤트 메서드 : on(),bind(),off(),unbind()

  ㅇ on(), off() : jQuery 1.7 부터 추가됨
     - on()  : 이벤트 연결, 이벤트 위임 처리
        . 사실상, on() 메서드 하나로도 위 대부분의 이벤트 메소드들을 수용 가능
           .. 이벤트 메소드명 옆 () 안에, 그 이벤트를 다룰 함수를 전달하게 됨
        . 例) $(요소).on("click", function() { })
     - off() : 이벤트 해제

  ㅇ bind(), unbind() 
     - bind()   : 이벤트,이벤트 핸들러,데이터도 함께 연결시켜줌
        . $().bind(이벤트명, 객체 리터럴 등의 데이터, 수행시킬 이벤트 핸들러 이름)
           .. 가운데 데이터는 선택적(없을 수 있음)
     - unbind() : 이벤트 제거

  ㅇ delegate() : 이벤트 위임


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


[jQuery] 1. jQuery 2. jQuery 요소 선택법 3. jQuery 활용 4. jQuery 이벤트 5. jQuery 화면 효과 6. jQuery 요소 삽입/삭제/교체/복사 7. jQuery ajax

 
        최근수정     요약목록(시험중)     참고문헌