jQuery를 사용한 이벤트 핸들러 추가/제거

jQuery를 사용해 이벤트 핸들러 바운딩하기
jQuery 이벤트 모델의 bind() 커맨드를 사용하면 DOM 엘리먼트에 이벤트 핸들러를 할당할 수 있다. 간단한 예를 보자.
$('img').bind('click', function(event){alert('안녕!');});

이 구문은 페이지에 잇는 모든 이미지에 click 이벤트 핸들러로 인라인 함수를 바인딩한다.

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

여기서 중요한 것은 한 구문에서 여러 커맨드를 실행할 수 있다는 것이다.
$('img')
     .bind('click', function(event){alert('안녕1!');});
     .bind('click', function(event){alert('안녕2!');});
     .bind('click', function(event){alert('안녕3!');});

'.'을 통하여 여러 커맨드를 실행할 수가 있다.

위의 bind() 커맨드의 특별한 형태인 one() 커맨드가 있다. 이 메서드는 이벤트 핸들러를 일회용으로 할당한다.

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

이벤트 핸들러 제거하기
일반적으로 이벤트 핸들러가 한 번 할당되면 페이지가 열려 있는 동안 계속 효과를 유지한다.
하지만 특별한 경우 이를 제거해야 할 경우가 있다. 이럴 때 사용하는 것이 unbind()커맨드이다.

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

  [출처] jQuery를 사용해 이벤트 핸들러 바운딩하기