click, scroll.. 등 다양한 메서드를 자주 사용하는데, on과의 차이에 대해 적어보려 합니다.

뭐 이렇게 되있다치면, 처음 ‘div.aaa’ 을 클릭하면 ‘div.aaa’ 가 추가되지만, 추가된 ‘div.aaa’에는 이벤트가 적용되지 않습니다. bind(), live(), delegate() 등.. 뭐 비슷한 친구들이 있긴하지만 모두 사라지고 있는 추세인것 같습니다.
.on() 과 .click()을 알아보자면..

이렇게 둘은 같습니다.

위에서 언급한 것과 같이 추가적으로 생성된 엘리먼트에도 이벤트를 적용하기 위해서 아래와 같이 사용할 수 있습니다.

정확한 표현은 아니겠지지만, 간단하게 이해를 위해 생각해보자면 이벤트의 주체에 있어서 그 차이가 있는 것 같습니다. 스크립트가 불러지고 $(‘.aaa’)라는 선택자는 현재 DOM에 등록되어 있는 $(‘.aaa’) 요소들에게 이벤트가 등록되어 바로 함수가 실행되지만 $(‘body’).on() 메서드를 사용하면 $(‘body’)에 해당 이벤트가 발생하였을때 대상의 엘리먼트를 찾기 때문에 비동기로 불러온 데이터에도 동일하게 이벤트가 적용되는 것으로 생각됩니다.

참고링크 : http://api.jquery.com/on/