jQuery 이벤트 모델

jQuery의 이벤트 구현 특징

. 이벤트 핸들러를 할당할 수 있는 통합 메서드를 제공

. 엘리먼트의 이벤트 타입마다 여러 핸들러를 할당

. click, mouseover 같은 표준 이벤트 타입명을 사용

. 핸들러의 매개변수를 써서 Event 인스턴스를 사용

. 자주 사용하는 Event 인스턴스의 프로퍼티들에 일관된 이름을 사용

. 이벤트 해제와 기본 행동을 막는 통합 메서드를 제공

 

캡쳐 단계를 지원하지 못하며,

하나의 API로 표준 호환 브라우저와 인터넷 익스플로러를 모두 지원

 

 

. bind( eventType=String, data=Object, listener=Function )

  일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당

  eventType : 핸들러를 할당할 이벤트 타입의 이름.

                   이벤트명과 '.' 문자로 구분한 접미어를 추가한 이벤트 타입은 namespace로 사용가능

  data : 핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터.

           생략하면 이벤트 핸들러가 두번째 매개변수가 된다.

 

  $('#vstar')
  .bind('click',function(event) { say('Whee once!'); })
  .bind('click',function(event) { say('Whee twice!'); })
  .bind('click',function(event) { say('Whee three times!'); });

  $('*').unbind('click.editMode');  ← eventType을 namespace형태로 사용

 

 

. 특정한 이벤트 핸들러만을 바인딩할 수 있는 유용하고 간단한 커맨드도 제공 ← bind대신

  커맨드 명이 언제 실행되고 어떤 이벤트를 바인딩해야 할 것인지를 명확히 표현

  blur, change, click, dbclick, error, focus, keydown, keypress, keyup, load,

  mousedown, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload

  ※ 이 메서드들은 event.data 프로퍼티에 설정할 데이터 값을 지정할 수 없다.

 

 

. one( eventType, data, listener )

  일치된 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당

  한 번 실행된 뒤 자동으로 삭제

 

. unbind( eventType, listener )

  unbind( event )

  확장 집합의 모든 엘리먼트에서 전달된 매개변수에 따라 이벤트 핸들러를 선택적으로 제거

  매개변수를 제공하지 않으면, 엘리먼트의 모든 리스너를 제거

  ※ 익명 인라인 함수는 사용할 수 없다. 

 

 

* Event 인스턴스 프로퍼티들 ← 플랫폼과 독립적

프로퍼티	설명
altKey	이벤트 발생시 Alt키가 눌리면 true가 설정되고 그렇지 않으면 false로 설정  맥 키보드 대부분은 Alt키를 Option으로 표시
ctrlKey	이벤트 발생시 Ctrl키가 눌리면 true가 설정되고 그렇지 않으면 false로 설정
data	핸들러를 할당할 때 bind()커맨드의 두번째 매개변수로 전달된 값
keyCode	keyup/keydown 이벤트인 경우, 눌리키를 반환  알파벳 문자일 때는 대소문자를 구분하지 않고, 대문자 값이 반환  keypress 이벤트의 경우 대소문자를 판단하는데 which 프로퍼티를 사용하면..
metaKey	이벤트 발생 시 메타키가 눌리면 true가 설정되고 그렇지 않으면 false가 설정  PC에서는 Ctrl키, 맥에서는 Command키
pageX	마우스 이벤트일 때, 페이지에서 이벤트가 발생한 x 좌표
pageY	마우스 이벤트일 때, 페이지에서 이벤트가 발생한 y 좌표
relatedTarget	몇몇 마우스 이벤트의 경우, 이벤트가 발생했을 때 커서가 들어가거나 나온 엘리먼트를 가리킨다.
screenX	마우스 이벤트일 때 스크린에서 이벤트가 발생한 x 좌표
screenY	마우스 이벤트일 때 스크린에서 이벤트가 발생한 y 좌표
shiftKey	이벤트 발생시 Shift키가 눌리면 true가 설정되고 그렇지 않으면 false가 설정
target	이벤트가 발생한 엘리먼트
type	모든 이벤트에서 발생한 이벤트 타입을 명시.  click등  다수의 이벤트를 한 이벤트 핸들러로 처리하는 경우에 유용
which	키보드 이벤트의 경우 이벤트를 발생시킨 키의 숫자 코드가 명시  마우스 이벤트의 경우 눌려진 버튼 값이 명시 (왼쪽1, 중간2, 오른족3)

 

 

. 이벤트 전파 제어하기

  stopPropagation() 메서드는 DOM 트리의 이벤트 버블링 전파를 막고

  preventDefault() 메서드는 이벤트의 기본 동작을 막는다.

  이벤트 전파와 기본동작을 동시에 막고 싶다면, 리스너 함수에서 false를 return

 

 

. trigger( enentType ) ?

  일치된 엘리먼트에 대하여 전달된 이벤트 타입에 해당하는 이벤트 핸들러를 모두 실행

  사용자에 의해 발생하는 Event처럼 event를 발생시키지 않으며, DOM 계층을 통해 전파되지도 않는다.

  이벤트 핸들러를 실행시키는 방법일 뿐.

 

  비슷한 성격? 으로... blur, click, focus, select, submit

  일치된 엘리먼트에 대해 명명된 이벤트 타입에 할당된 이벤트 핸들러를 실행

 

 

. toggle( listenerOdd=Function, listenerEven=Function )

  확장 집합의 모든 엘리먼트에 클릭 이벤트가 발생할 때마다 번갈아 실행할 함수 할당

  listenerOdd (홀수번째 클릭 때 실행될 함수) listenerEvent (짝수번째 클릭 때 실행될 함수)

  → 엘리먼트의 사용 가능 상태를 토글할 때 사용

 

  $(function(){
    $('#aaa').toggle(
      function(event) { $(event.target).css('opacity',0.4); },
      function(event) { $(event.target).css('opacity',1.0); }
    );
  });

 

. hover( overListener, outListener )

  일치된 엘리먼트에 mouseover와 mouseout 핸들러를 할당

  자식 엘리먼트를 포함하더라도 해당 엘리먼트가 감싸고 있다면 mouseover로 처리

  $('#aaa').hover( func1, func2 );