jQuery bind(), on(), live(), delegate()

jquery를 사용하면서 가장 많이 쓰고 쓰이고 있고 사용되고 있는 이벤트 핸들러 메서드 bind(), on(), live(), delegate()
어느 누구는 bind를 써라. 아니다 bind보다는 on이다. live도 쓰이던데 delegate는?
대체 그 차이점은 무엇이고 언제 써야 하는 건지 정리해 보았습니다.

 

bind()

$(select).bind('click', function(){ ... });

jQuery1.7인 시점에서 bind는 사용하지 않습니다.

그 이유는 on메서드가 나오면서 새로운 기능 적용이 안될 예정이며 사라질 수도 있기 때문입니다.

단일 요소를 각 이벤트 처리기에 연결합니다.

업데이트(복제)된 요소는 이 이벤트 처리기를 받을 수 없습니다.

복제된 요소가 생긴 다음에 unbind로 이벤트를 해제하고 다시 걸어야 합니다.

만약 li에 이벤트를 연결한다면 각 li개수만큼 이벤트가 걸려 리소스로 잡힙니다.

해결방법 버블링 이용 – 부모 요소에 이벤트를 걸고 if문으로 조건을 주어 처리합니다.

 

on()

$(select).on('click', function(){ ... });

단일 요소를 각 이벤트 처리기에 연결합니다.

업데이트(복제)된 요소도 이 이벤트 처리기를 받을 수 있습니다.

bind() , live() , delegate() 메서드의 기능이 한 번에 통합되었습니다.

선택된 요소에 하나 이상의 이벤트에 대한 이벤트 핸들러 함수를 연결합니다. 

 

live() 

$(select).live('click', function(){ ... });

아직 생성되지 않은 엘리먼트에도 추후에 생성될 때 이용할 수 있는 이벤트를 미리 걸어둘 수 있습니다.

1.7 버전 이상에서 사용되지 않습니다.

 

delegate()

$(select).delegate('click', function(){ ... });

복제된 이벤트를 bind 해야 할 경우 delegate를 통해 target을 설정해서 이벤트를 걸을 수 있습니다.

하나의 이벤트로 하위 이벤트 처리를 좀 더 쉽게 가능합니다.

이벤트의 this가 이벤트를 발생시킨 항목을 가리킵니다. (target 생략 가능)

루트 요소의 특정 집합에 따라 선택 일치하는 모든 요소를, 현재 또는 미래에 대한 하나 이상의 이벤트 핸들러를 연결합니다.

 

결론은 bind, live, delegate 고간에! 1.7.1 이상 버전이라면 on()으로 사용하면 됩니다.