jQuery 이벤트

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


[jQuery] 1. jQuery 2. jQuery 요소 선택법 3. jQuery 활용 4. jQuery 이벤트 5. jQuery 화면 효과 6. jQuery 요소 삽입/삭제/교체/복사 7. jQuery ajax 8. jQuery 객체
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
  7.   정보기술(IT)
        1. 정보기술
    1.   전산기초
    2.   컴퓨터구조
    3.   프로그래밍
          1. 프로그램, 프로그래밍
      1.   프로그래밍 언어론
      2.   프로그래밍 방법론
      3.   객체지향 프로그래밍
      4.   자료표현코드
      5.   자료구조
      6.   알고리즘
      7.   시스템 소프트웨어
      8.   프로그래밍언어 종류
            1. 프로그래밍 언어
        1.   C
        2.   C++
        3.   자바(Java)
        4.   자바스크립트
              1. JavaScript
              2. JS 기초 문법
          1.   JS 변수,타입,논리식
          2.   JS 구문,연산자
          3.   JS 함수
          4.   JS 객체
          5.   JS 배열/Map/Set
          6.   JS 활용
          7.   JS 웹문서 제어
                1. 웹문서 내 JS
                2. 동일 출처 정책
            1.   JS Window 객체
            2.   JS DOM 제어
            3.   JS 이벤트
            4.   Ajax
            5.   jQuery
              1.   1. jQuery
                  2. jQuery 요소 선택법
                  3. jQuery 활용
                  4. jQuery 이벤트
                  5. jQuery 화면 효과
                  6. jQuery 요소 삽입/삭제/교체/복사
                  7. jQuery ajax
                  8. jQuery 객체
        5.   PHP
        6.   파이썬
        7.   (기타 언어)
      9.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   공학일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌