본문 바로가기

jQuery

04-2.이벤트 모델

 jQuery 이벤트 모델

 

특징)
- 이벤트 핸들러를 할당할 수 있는 통합 메서드를 제공.
- 엘리먼트의 이벤트 타입마다 여러 핸들러를 할당할 수 있다.
- click, mouseover 같은 표준 이벤트 타입명을 사용.
- 핸들러의 매개변수를 써서 Event 인스턴스를 사용할 수 있다.
- 자주 사용하는 Event 인스턴스의 프로퍼티들에 일관된 이름을 사용.
- 이벤트 해제와 기본 행동을 막는 통합 메서드를 제공.
- 캡처 단계를 지원하지 못함
- 하나의 API로 표준 호환 브라우저와 인터넷 익스플로러를 모두 지원.


[ jQuery를 사용해 이벤트 핸들러 바인딩 ]

bind(eventType, data, listener) - 일치된 집합에 있는 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당.
- eventType : (String) 핸들러를 할당할 이벤트 타입의 이름. 이벤트명과 '.' 문자로 구분한 접미어를 추가한 이벤트 타입은 이름공간으로 사용할 수 있다.
- data : (Object) 핸들러 함수에서 사용하도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략하면 이벤트 핸들러가 두 번째 매개변수가 된다.
- listener : (Function) 이벤트 핸들러로 할당될 함수


예제)

  1. $('img').bind( 'click' , function(event) { alert('안녕!'); } );

설명) 페이지에 있는 모든 이미지에 click 이벤트 핸들러로 인라인 함수를 바인딩.

 


/* 이벤트 바인딩 그룹 */
- 이벤트 핸들러를 그룹으로 묶어주는 기능
- '.' 을 사용하여 이벤트 이름 뒤에 접미어를 붙여 이벤트 이름을 이름공간으로 사용.
- 이벤트 바인딩을 묶으면 이를 하나의 그룹 단위로 쉽게 제어할 수 있음.

 

예제)

  1. $('#thing1').bind('click.editMode', someListener);
    $('#thing2').bing('click.editMode', someOtherListener);
    ...
    $('#thingN').bing('click.editMode', stillAnotherListener);
  2. $('*').unbind('click.editMode');

설명) editMode라는 이름으로 모든 바인딩을 그룹으로 묶어 나중에 그룹 단위로 동작을 실행.
모든 바인딩을 제거하려면 unbind()를 사용


eventTypeName(listener) - 매개변수로 넘어온 함수를 메서드 이름으로 명명한 이벤트 타입의 핸들러로 할당.
- listener : (Function) 이벤트 핸들러로 사용할 함수

/* 지원가능한 커맨드 */
blur  focus  mousedown  resize
change  keydown  mousemove  scroll
click  keypress  mouseout  select
dblclick  keyup  mouseover  submit
error  load  mouseup  unload
이 단축 메서드를 사용할 때는 event.data 프로퍼티에 설정할 데이터 값을 지정할 수 없다.


one(eventType, data, listener) - 일치된 모든 엘리먼트에 지정한 이벤트 타입의 핸들러로 전달된 함수를 할당. 한 번 실행되면 자동으로 삭제.
- eventType : (String) 핸들러를 할당할 이벤트 타입의 이름.
- data : (Object) 핸들러 함수가 이용할 수 있도록 Event 인스턴스에 data라는 프로퍼티로 제공되는 데이터. 생략하면 핸들러가 두 번째 매개변수가 됨.
- listener : (Function) 이벤트 핸들러로 할당될 함수

- 이벤트 핸들러를 일회용으로 할당
- 이벤트 핸들러가 한 번 실행되고 나면 자동으로 이벤트 핸들러를 삭제.
- bind() 커맨드와 유사

 

 

[ 이벤트 핸들러 제거 ]

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

 

 

[ Event 인스턴스 ]

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

※ keypress 이벤트는 which 프로퍼티를 사용하면 대소문자를 구분할 수 있다.
※ keyup과 keydown 이벤트가 발생할 때에는 대문자 키 코드만을 반환하는데 shiftKey를 사용하여 대소문자를 구분한다.

 

 

[ 이벤트 전파 제어 ]

stopPropagation() -: DOM 트리의 이벤트 버블링 전파를 막음.
preventDefault() - 이벤트의 기본 동작을 막음.

※ 이벤트 전파와 기본 동작을 막고 싶다면 리스터 함수에서 false를 반환.

 

 

[ 이벤트 핸들러 호출 ]

trigger(eventType) - 이벤트 타입에 해당되는 이벤트 핸들러를 모두 실행.
- eventType : (String) 실행될 핸들러에 대한 이벤트 타입의 이름.


 

eventName() - 일치된 엘리먼트에 대해 명명된 이벤트 타입에 할당된 이벤트 핸들러를 실행.
※ 지원하는 커맨드
- blur
- click
- focus
- select
- submit

 

 

[ 그 외 이벤트 관련 커맨드 ]

toggle(listenerOdd, listenerEven) - 확장 집합의 모든 엘리먼트에 클릭 이벤트가 발생할 때마다 번갈아 실행할 listenerOdd와 listenerEven을 할당.
- listenerOdd : (Function) 홀수 번째 클릭을 할 때 클릭 이벤트 핸들러로 실행될 함수
- listenerEven : (Function) 짝수 번째 클릭을 할 때 클릭 이벤트 핸들러로 실행될 함수


hover(overListener, outListener) - 일치된 엘리먼트에 mouseover와 mouseout 핸들러를 할당. 마우스 포인터가 오직 엘리먼트가 감싼 영역에 들어가고 나갈 때만 실행되며 자식 엘리먼트로 이동하는 것은 무시된다.
- overListener : (Function) mouseover 핸들러가 되는 함수
- outListener : (Function) mouseout 핸들러가 되는 함수

 

 

 

이 글은 스프링노트에서 작성되었습니다.