jQuery Event 처리 함수 click, bind, live, delegate의 차이점

멀더가 전에 적었던 포스트에 click, bind, live  가 같은 함수라고 적었던 오류를 정정하고자
포스트를 새로 올립니다.

jQuery에서 event 를 처리하자면 여러가지 방법이 있습니다.

1. direct     : ex) $('a').click (function() { alert('blah'););
2. bind      : ex) $('a').bind ('click', function() { alert('blah'); });
3. live        : ex) $('a').live ('click', function() { alert('blah'); });
4. delegate : ex) $('#containter').delegate('a', 'click', function() { alert('blah'); });

위 4가지함수들의 미표한 차이가 있다는걸 최근에 알게 되었습니다..

click  형의 direct  handler == bind  와 결구 같습니다.
ex)  $('a').click(function() {} );   ==  $('a').bind('click', function() {} ); 

live 와 delegate   의 경우는  bind 와는 다르게 event의 해석을
event가 발생한 당시의 모든 dom tree 에 적용 됩니다.

즉  document.ready 당시와 다르게 변형된 document를 대상으로 합니다. (append,  remove 등으로 처리한 추가 dom element 에게 모두 적용 됩니다.)

필자게 테스트 한결과  live와   delegate 의 차이는 delegate의 경우 live 와 달리 root element 로부터 scan이 되지 않으므로 속도가 빠를것 같다는 추측 하나와,

이벤트 전파시, live 의 경우에만  e.stopPropagation()으로 막는 경우에도 상위로 event가 전파된다는 겁니다...
 
이점 유의 해야 할듯 합니다.

테스트 코드를 아래에 첨부 합니다.

jquery-event-tester.zip