jQuery:: Namespaced event

Javascript, jQuery 에서 하나의 event에 여러개 handler function을 연결하고 컨트롤 할 수 있다.
이를 좀 더 쉽게 사용할 수 있도록 jQuery에선 Namespaced Event 기능을 제공한다.
간단히 요약하자면 event와  handler 의 '연결'을 class 로 name을 주고 이를 컨드롤 할 수 있게 하는 형태다.

흔히 쓰이는 event와 handler 연결 형태는

 $('#button').click( handler1 );
 $('#button').bind('click', handler2);
 $('#button').bind('click', handler3);

와 같은 형태인데, 위의 경우엔 id=button인 element를 클릭하면 handler1, 2,3 세개 handler 함수가 동시에 호출 된다. 경우에 따라서 handler 들을 개별적으로 컨드롤 해야할 경우가 생긴다. 이런 경우 namespaced event 를 사용하면 매우 편리하다.


사용자 로그인 전과 후의 기능을 차별화 하려고 하는 상황을 가정해 보자.
버튼 A를 누르면

1. 로그인 전에는

• 로그인 창을 띄워준다.
• 버튼 색깔을 빨간색으로 지정한다.

2. 로그인 후에는

• 버튼 색깔을 빨간색으로 지정한다. 
• 사용자 정보 창을 띄워준다. 

아래와 같이 버튼이 지정되어 있다면,

<button id="login">Button</button>

로그인 전 버튼 클릭이 담당하는 모든 handler 함수를 버튼에 연결하고,

 $('#login').bind('click.loginPageShow', loginPage );
 $('#login').bind('click.changeColor',changeColor );

로그인 하는  경우 로그인 페이지 창 띄우는 handler를 버튼 '클릭' event에서 삭제하고, 사용자 정보 창 띄우는 handler를 버튼에 아래와 같이 연결할 수 있다.

 if( login() ) {
    $('#login').unbind('click.loginPageShow' );
    $('#login').bind('click.showUserinfo',showUserinfo );
 }