5. jQuery Events

5. jQuery Events

 ■ jQuery API Events

 ο Page Load
   1) ready(handler)
      - 의미
        DOM 이 로드 되어 조작·해석이 가능하게 된 타이밍에 함수를 실행

 ο Event Handling
   1) bind(eventType, [eventData], handler(eventObject))
      - 의미
        일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당한다.
      - 매개변수
         eventType: (String)핸들러를 할당할 이벤트 타입의 이름
         eventData: (Object)핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략 가능
      - 반환값 - 확장 집합

   - 사용예
      // '.'을 통하여 여러 커맨드를 실행할 수가 있다.
      $('img').bind('click', function(event){
           alert('안녕1!');
       })
      .bind('click', function(event){
           alert('안녕2!');
      })
      .bind('click', function(event){alert('안녕3!');
      });

    // a 라는 id를 가지고 있는 요소를 마우스 클릭 시 body에 test_class라는 CSS class를 추가한다.
    $(function(){
        $('#a').bind('click', function(){
            $('body').addClass('test_class');
        });
    });

 

   2) bind(events)
      - 의미
        bind를 이용하여 이벤트를 여러개 추가할 수 있다.

• 사용예
        // a 라는 id를 가지고 있는 요소를 마우스 오버시 '마우스오버'라는 경고 문구가 나타나고 마우스 클릭시 '클릭'이라는 경고 문구가 나타난다.
        $(function() {
          $("#a).bind({
              click : function() {
                  alert("클릭");
              },
              mouseover : function() {
                  alert("마우스오버");
              }
           });
        });

   

   3) one(eventType, [eventData], handler(eventObject))
      - 의미
        일치된 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당한다. 실행된 뒤 삭제된다.
      - 매개변수
        eventType: (String)핸들러를 할당할 이벤트 타입의 이름
        eventData: (Object)핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략 가능
        handler: (Function)이벤트 핸들러로 할당될 함수
      - 반환값
        확장 집합

• 사용예
        // a 라는 id를 가지고 있는 요소를 클릭 하면 one CSS class를 추가하고 바로 click 이벤트가 해제된다.
        $(function(){
            $('#a').one('click', function(){
              $('body').addClass('one');
            });
        });

   

   4) trigger(eventType, extraParamters)
      - 의미
         각 요소의 인수로 건네준 이벤트를 한번 실행

      - 사용예
        // a라는 id를 가진 요소의 click 이벤트를 실행한다.
       $(function(){
           $('#a').trigger('click');
       });

     // trigger() 메서드 기능을 간소화하여 사용하였다.
      $(function(){
          $('#a').click();
      });

 

   5) triggerHandler(eventType, extraParamters)
      - 의미
        요소의 이벤트를 실행하지만 핸들러에 들어가 있는 함수만을 실행한다. 브라우저가 디폴트로 가지고 있는 동작은 행해지지 않는다.

 

   6) unbind(eventType, [eventData], handler(eventObject))/unbind(event)
      - 의미
        확장 집합의 모든 엘리먼트에서 전달된 매개변수에 따라 이벤트 핸들러를 선택적으로 제거한다.
      - 매개변수
        eventType: (String)매개변수를 제공하면 지정된 이벤트 타입에 할당된 리스너만 제거한다.
         handler(eventObject): (Function)매개변수를 제공하면 지정된 리스너와 동일한 것만 제거한다.
        event: (Event) Event인스턴스의 정보로 알 수 있는 이벤트가 발생했을 때 호출될 리스너를 제거한다.
      - 반환값 : 확장 집합

• 사용예
        // a 라는 id를 가지고 있는 요소를 마우스 클릭시 test의 기능인 body에 test_class라는 CSS class를 추가하는 기능을 만든후 unbind 메서드를 이용하여 다시 그 기능을 제거하고 있다.
        $(function(){
            var test = function(){
                $('body').addClass('test_class');
            };
            $('#a').click(test);
            $('#a').unbind('click', test);
        });

   

  7) click(handler(eventObject))
      - 의미
        핸들러를 이벤트에 연결하는 것은 흔한 작업이기 때문에, jQuery는  보다 더 간단하고 명료한 방식의 간소화된 이벤트 메서드를 제공하고 있다.

•  사용예
          // a 라는 id를 가지고 있는 요소를 클릭시 body에 test_class라는 CSS class를 추가시킨다.
          $(function(){
              $('#a').click(function(){
                  $('body').addClass('test_class');
              });
          });

   

    8) click()
      - 의미
        click 이벤트를 실행 시킨다.

• 사용예
          // a 라는 id를 가지고 있는 요소의 click 이벤트를 실행시킨다.
          $(function(){
              $('#a').click();
          });

 ο Interaction Helpers
   1) hover(handerIn(eventObject), handerOut(eventObject))
      - 의미
       요소에 마우스가 이동 했을 때의 동작을 설정한다. out은 마우스가 벗어났을 때 호출

• 사용예
        // a 라는 id 가지고 있는 요소에 마우스 커서가 들어가면 hover CSS class 를 추가하고 마우스가 떠나면 hover CSS class를 제거 한다.
        $(function(){
            $('#a').hover(function(){
                $('body').addClass('hover');
            }, function(){
                $('body').removeClass('hover');
            });
        });

   2) toggle(fn1, fn2, ..., fnN)
      - 의미
       클릭될 때마다 함수를 차례로 호출

• 사용예
         // a 라는 id를 가지고 있는 요소를 처음 클릭시 body에 test_class라는 CSS Class를 추가되고 두 번째 클릭시 body에 test_class라는 CSS class를 제거한다. 이 후 두 함수가 교대로 실행된다.
         $(function(){
             $('#a').toggle(function(){
                $('body').addClass('test_class');
            }, function(){
                $('body').removeClass('test_class');
            });
        });

   

 ο Live Events
   1) live(eventType, eventData, handler)
      - 의미
        이벤트에 대해서 핸들러를 등록한다. 등록된 이벤트는 셀렉터에 매치하는 모든 요소에 적용된다. 커스텀 이벤트에 대해서bind하는 것도 가능하다. 이 함수로 지정할 수 있는 이벤트는 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup 이다.

       jQuery 1.4부터는 ".live()" 메소드에서 사용할 수 있는 이벤트 종류가 늘었다.  "submit", "change", "focus" 그리고 "blur"이다. ".live()" 메소드를 이용하면 이벤트 할당 이후 새롭게 추가되는 요소에도 반영되기 때문에 효율적이다.

       그러나 이벤트의 이름을 작성할 때 신중해야한다. "focusin" 그리고 "focusout" 은 "focus" 와"blur" 이벤트를 위임하기 때문입니다.

       jQuery('input').live('focusin', function(){
           // do something with this
       });

 

  2) die()
      - 의미
        등록된 이벤트를 삭제 한다.

 ο delegate()와 undelegate()
    - delegate(selector, eventType, handler)
       selector: 타겟인 엘리먼트
       eventType: 이벤트 명 지정(click,keydown등)
       handler: 실행할 이벤트 지정

    - undelegate()는 delegate()의 해제 메소드이다.

       delegate()는 live()를 대신하여 추가된 메서드이다. delegate()와 undelegate()는 특정 루트와 특정 이벤트에 대한 처리를 단순화 하며, 기존의 .live()의 단점을 보안했다.
       1.3버전에 추가된 live()는 bind()를 사용함에 있어서 보다 더 유연하게 이벤트에 접근할 수 있었다.
       기존에는 동적으로 생성되는 엘리먼트에 이벤트를 다시 걸려면 bind()를 해야 하는 번거로운 작업이 필요했다. 이것을 live()는 동적으로 추가되는 개체들에 대해서도 이벤트를 그대로 상속해 줄 수 있다.

      - 사용예
       // <td>을 클릭 할 경우 <tr>행이 추가되면서 동시에 클릭 이벤트가 바인딩
      $(function(){
         $("td").live("click", function(){
         $(this).parent().parent().after("<tr><td><p>"+text+"</p></td></tr>"); });
      });

      하지만 약간의 문제점이 있니다.

      첫 번째로는 탐색(Traversing)메서드를 사용하여 필터링이나 찾기를 통해서는 접근할 수 없다.
      $("td").eq(1).live("click", function(){
        $(this).parent().parent().after("<tr><td><p>"+text+"</p></td></tr>");
      });

      두 번째로는 기본 DOM 엘리먼트는 찾지 못한다.
      $(document.body).live("click", function(){});

      세 번째로는 체인의 맨 위에 있어야 가능하다.
      $("ul li").live("click", function(){});

      따라서 필터 같은 탐색을 이용하여 개체를 찾아 이벤트를 적용시키기 위해서는 일일이 each문을 써서 돌려야 한다.

      $("table").each(function(){
        $("td", this).live("hover", function(){
        $(this).toggleClass("hover"); });
      });// .live()

      $("table").each(function(){
        $("td", this).die("hover");}); // .die()

      반면 .delegate()를 쓴다면 다음과 같다.

      $("table").eq(1).delegate("td:odd","click", function(){
          $(this).parent().parent().after("<tr><td><p>과일</p></td></tr>");
      });

      필터가 가능하다. 즉 .live()보다 강력다.

 ο Event 인스턴스 프로퍼티 
    altKey : Alt 키가 눌리면 true, 아니면 fasle
    ctrlKey : Ctrl 키가 눌리면 true, 아니면 fasle
    data : bind() 커맨드의 두 번째 매개변수로 전달된 값
    KeyCode : 눌린 키를 반환
    metaKey : 메타키가 눌리면 true, 아니면 false
    pageX : 마우스 이벤트의 경우 이벤트가 발생한 x좌표
    pageY : 마우스 이벤트의 경우 이벤트가 발생한 y좌표
    relatedTarget : 마우스 이벤트의 경우 커서가 들어가거나 나온 엘리멘트
    screenX : 마우스 이벤트의 경우 스크린에서 이벤트가 발생한 x좌표
    screenY : 마우스 이벤트의 경우 스크린에서 이벤트가 발생한 y좌표
    shiftKey : Shift 키가 눌리면 true, 아니면 fasle
    target : 이벤트가 발생한 엘리먼트
    type : 이벤트 타입을 명시
    which : 이벤트 키 코드 또는 마우스 눌려진 값(왼쪽1, 중간2, 오른쪽3)
 
      - 사용예
        $(function(){
           $('.test').keypress(function(event){
               if (event.which && (event.which  > 47 && event.which  < 58 || event.which == 8)) {
                   alert('숫자임!');
               } else {
                  alert('숫자아님!');
                  event.preventDefault();
               }
           });
       });
             :
      <div class="test">
          <input type="text"/>
      </div>

       ie 계열의 Browser에서는 event.returnValue = false;
       그 외의 Browser에서는 event.preventDefault();
       를 이용하여 자기 자신의 기본 이벤트를 취소 한다.

 ο Event Helpers
   - blur()
     각 요소의 blur 이벤트를 실행. blur 이벤트는 요소가 마우스등의 pointing, device나 탭 키등에서 포커스를 잃은 때 발생.
   - blur(handler(eventObject))
     각 요소에 blur이벤트를 설정
   - change()
     각 요소의 change 이벤트를 실행. change 이벤트는 포커스를 잃은 상태의 input요소가 포커스를 얻고, 값의 변경을 완료했을 때에 실행된다.
   - change(handler(eventObject))
     각 요소에 change 이벤트를 설정
   - click()
     각 요소의 click 이벤트를 실행
   - click(handler(eventObject))
     각 요소에 click 이벤트를 설정
   - dblclick()
     각 요소의 dblclick 이벤트를 실행
   - dblclick(handler(eventObject))
     각 요소에 dblclick 이벤트를 설정
   - error()
     각 요소의 error 이벤트를 실행. 브라우저의 디폴트의 error의 동작과 이것에 bind된 모든 함수가 실행된다.
   - error(handler(eventObject))
     각 요소에 error 이벤트를 설정
   - focus()
     각 요소의 focus 이벤트를 실행. focus 이벤트는 마우스등의 pointing, device 나 탭 키로 요소가 포커스를 받았을 때에 실행 한다.
   - focus(handler(eventObject))
     각 요소에 focus 이벤트를 설정
   - focusin( handler(eventObject)) / focusin( [ eventData ], handler(eventObject))
     focusout( handler(eventObject) ) / focusout( [ eventData ], handler(eventObject))
     "focus"와 "blur" 이벤트를 위임한 것으로 "focusin"과 "focusout"으로 명명한 것 이다. 특정한 요소 및 자식 요소에서 일어나는 액션을 감지하여 이벤트를 발생한다.

    jQuery('form')
        .focusin(function(){
            jQuery(this).addClass('focused');
        });
        .focusout(function(){
            jQuery(this).removeClass('focused');
        });

     주의해야 할 점은 "bubble"이 발생하지 않는 다는 것이다. 즉 부모 요소는 대상 요소보다 먼저 트리커되는 것을 의미한다.

   - keydown()
     각 요소의 keydown 이벤트를 실행
   - keydown(handler(eventObject))
     각 요소에 keydown 이벤트를 설정
   - keypress()
     각 요소의 keypress 이벤트를 실행
   - keypress(handler(eventObject))
     각 요소에 keypress 이벤트를 설정
   - keyup()
     각 요소의 keyup 이벤트를 실행
   - keyup(handler(eventObject))
     각 요소에 keyup 이벤트를 설정
   - load(handler(eventObject))
     각 요소의 load 이벤트를 설정
   - mousedown(handler(eventObject))
     각 요소의 mousedown 이벤트를 설정
   - mousemove(handler(eventObject))
     각 요소의 mousemove 이벤트를 설정
   - mouseout(handler(eventObject))
     각 요소의 mouseout 이벤트를 설정
   - mouseover(handler(eventObject))
     각 요소의 mouseover 이벤트를 설정
   - mouseup(handler(eventObject))
     각 요소의 mouseup 이벤트를 설정
   - resize(handler(eventObject))
     각 요소의 resize 이벤트를 설정
   - scroll(handler(eventObject))
     각 요소의 scroll 이벤트를 설정
   - select()
     각 요소의 select 이벤트를 실행.  select 이벤트는 텍스트 에리어의 문자열을 선택 상태로 하거나 선택 범위를 변경했을 때에 실행 한다.
   - select(handler(eventObject))
     각 요소에 select 이벤트를 설정
   - submit()
     각 요소의 submit 이벤트를 실행
   - submit(handler(eventObject))
     각 요소에 submit 이벤트를 설정
   - unload(handler(eventObject))
     각 요소에 unload 이벤트를 설정