자주 쓰는 jQuery 기능 - 이벤트 편

다른 프로그래밍 언어와 마찬가지로 스크립트 환경에서도 이벤트 처리가 많은 부분을 차지하게 된다.
기존 자바스크립트의 addEventListener와 같은 함수를 랩핑한 jQuery 만의 이벤트 처리 방식을 정리해 보자.

기본 이벤트 처리
click, mousedown과 같은 일반적인 이벤트 이름을 그대로 사용하여 이벤트 처리기를 연결할 수 있다.

.이벤트명(이벤트처리기 함수)
선택자로 선택된 element에 이벤트명(ex:click, mousedown 등)을 지정해 특정 이벤트 발생시 이벤트처리기 함수가 실행되도록 한다

다음은 이 방식을 이용해 click, hover 두 이벤트를 처리하는 코드다.

$(function(){                
   $('div').click(function(event){
      alert(event.target.innerText);  
   });
   $('div').hover(function(event){
      alert(event.type);  
   });
});

bind() 함수를 이용한 이벤트 처리
jQuery가 이벤트를 일관적으로 처리하기 위해 만든 최최의 함수로 bind()함수를 이용해 이벤트를 처리할 수 있다. 앞서 소개한 '기본 이벤트 처리'는  이것의 단축 표현이다.

.bind('이벤트명', 이벤트처리기 함수)
bind()함수는 문자열로 지정한 이벤트 명과 이벤트 처리기 함수를 매개변수로 받아 이벤트를 처리한다.

이전 코드의 click 이벤트를 bind() 함수를 이용해 다음과 같이 구현할 수 있다

$(function(){                
   $('div').bind('click' ,function(event){
      alert(event.target.innerText);  
   });      
});

여러 이벤트를 동시에 등록
bind()함수를 이용하면 동일한 요소에 여러개의 이벤트를 한번에 연결할 수 있다. 아래와 같이 처리할 이벤트를 이어서 지정하면 된다. event.type으로 어떤 이벤트가 발생했는지 알 수 있을 것이다.

$(function(){                
   $('div').bind('click mouseenter' ,function(event){
      alert(event.type);  
   });      
});

이렇게 하나 이상의 이벤트를 처리할 때 각각의 이벤트 처리 함수를 구분하고 싶을 경우가 있다. 이 경우 event.target 정보를 바탕으로 처리기 함수를 구분할 수 있지만 아래 코드와 같이 객체 형태로 정의할 수도 있다.(이 방식은 jQuery 1.4 이상부터 지원한다)

$(function(){                
   $('div').bind(
    {
         click: function(evnet){ alert(event.type); }
     },
     {
         mouseenter: function(evnet){ alert(event.type); }
     }          
   });      
});

이벤트 매개변수 사용
이벤트 처리기 함수에 매개변수를 전달하고 싶은 경우 bind() 함수의 두 번째 매개변수에 지정할 수 있다. 다음 코드는 bind()함수의 두 번째 매개변수에 자바스크립트 객체형태로 매개변수를 전달하는 예이다.

$(function(){                
  $('div').bind('click', {key1:'value1', key2:'value2'} ,function(event){
      alert(event.data.key1 + '/' + event.data.key2);
  });      
});

여기서 한가지 짚고 넘어가야 할 것은, 위 예제는 이벤트를 등록하는 시점에 매개변수를 전달한다는 것이다.
즉 이벤트 바인딩 시점에 이미 데이터가 정의되어이 있어야 하고 전달가능해야 한다는 점이다. 그러나 대부분의 실제 환경에서는 이벤트 바인딩 시점이 아닌, 바인딩 이후 프로그램 동작 가운데 매개변수 정보가 생성된다는 점이다. 이처럼 동적인 매개변수를 처리하기 위해서는 이벤트를 스스로 발생시키는 trigger() 함수를 이용해 동적인 데이터를 매개변수로 전달할 수 있게 된다. 이때 bind() 함수에 매개변수를 받는 부분이 추가되어야 한다.

$(function(){                
  $('div').bind('click' ,function(event, data1, data2){
      alert(data1 + '/' + data2);  
  });   
     
  //이벤트 바인딩 이후 trigger()함수로 이벤트 자동 발생시키기
  $('div').trigger('click',['value1','value2']);         
});

이벤트 제거
등록된 이벤트를 제거하려면 다음과 같이 unbind() 함수를 이용할 수 있다.

$('div').unbind();

만일 <div> 요소의 특정 이벤트만 제거하고 싶을 경우 그 이벤트명을 지정해 주면 된다.

$('div').unbind('click');

live() 함수를 이용한 이벤트 처리
bind() 함수 이후에 새로 추가된 live() 함수(1.3 버전 이후 추가)를 이용하면 응용프로그램 실행 도중 동적으로 추가된 요소에도 자동으로 이벤트를 바인딩 할 수 있다. 사용방법은 bind() 함수와 유사하다

.live('이벤트명', 이벤트처리기 함수)

아래 코드를 보면, HTML 영역에서 총 두개의 <li> element를 미리 정의해 두고, 이들에게 클릭 이벤트가 실행되도록 live() 함수로 이벤트를 등록했다. 이후 '아이템추가' 버튼을 클릭해서 새로운 아이템(<li>)을 추가할 수 있게 한다. 이때 동적으로 새로 추가된 <li> element 도 live() 함수로 등록한 클릭 이벤트가 반영된다.
만일 live()가 아니라 bind() 함수로 이벤트를 등록했다면 새로 추가된 <li> element는 클릭 이벤트가 발생하지 않을 것이다(새로 추가된 <li> 에 수동으로 bind() 해 줘야 한다)

이처럼 live() 함수를 이용한 이벤트 처리는 비동기 통신으로 페이지 갱신 없이 element가 추가되는 시나리오에 유용하게 사용할 수 있다.

- Html
<ul id="list">
   <li>Item1</li>
   <li>Item2</li>    
</ul>  
<button id="btnAdd">아이템추가</button>

- Script
//모든 <li> element에 click 이벤트 등록
$(function(){                     
  $('li').live('click' ,function(event){
      alert(event.target.innerText);  
  });  
     
//'아이템추가'버튼에 클릭 이벤트 등록
  $('#btnAdd').bind('click' ,function(event){
     $('#list').append('<li>new Item</li>');
  }); 
});   

live()로 등록한 이벤트는 die() 함수로 제거할 수 있다

$('li').die();

delegate() 함수를 이용한 이벤트 처리
jQuery 1.4.2 버전 부터는 새로운 이벤트 처리 함수인 delegate()가 추가되었다. live()의 동적 이벤트 바인딩도 지원하며 기존 live() 에서 제한 되었던 몇 가지 단점을 보완하고 성능이 더 개선된 함수라고 한다. 자세한 사항은 jQuery API 문서를 참고하기 바라며 다음과 같이 사용할 수 있다. 아래 코드는 앞의 live()로 구현된 것을 delegate()로 바꾼 것이다.

.delegate('선택자', '이벤트명', 이벤트처리기 함수)

$(function(){                     
  $('ul').delegate('li','click' ,function(event){
     alert(event.target.innerText);  
});

delegate()로 등록한 이벤트는 undelegate() 함수로 제거할 수 있다.

$('ul').undelegate('li');

참고자료>
http://api.jquery.com/bind/
http://api.jquery.com/live/
http://api.jquery.com/delegate/
http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2