jQuery에서 많이 사용되는 이벤트(event) 심는 방법에는 옛 버전부터 최근까지 여러 용법이 소개되고 쓰여왔다. 이런 많은 용법이 함께 사용되면서 상황에 따라 어떤 것을 써야 할지 고민하게 되고, 또 서로 다른 용법으로 혼란을 줄 수도 있었다.
그래서 최신 1.7 버전부턴 과거부터 축적돼서 사용되던 이런 여러 방법을 통합하려는 시도로 .on() method가 소개되었는데, 이런 여러 용법을 잘 정리해서 비교해 놓은 글. – Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()
결국, 전부터 쓰던 .bind(), .live(), .delegate() method는 더 일관된 사용법의 통합된 .on() method를 써서 다음과 같이 적용해 줄 수 있다.
/* The jQuery .bind(), .live(), and .delegate() methods are just oneline pass throughs to the new jQuery 1.7 .on() method */// Bind$ "#members li a" on "click" {} ;$ "#members li a" bind "click" {} ;// Live$ document on "click" "#members li a" {} ;$ "#members li a" live "click" {} ;// Delegate$ "#members" on "click" "li a" {} ;$ "#members" delegate "li a" "click" {} ;
jQuery 1.7.x 버전부턴 .on() method가 대세.
덧붙임: jQuery 1.7 버전의 문법을 지원하는 TextMate jQuery Bundle
“jQuery에서 이벤트를 심는 데 사용되는 여러 가지 방법과 그 장단점 비교”에 달린 5개의 댓글
하지만 1.7은 아직 많이 안쓰고 있다는 진실;;;.on을 쓸 수 없게 만드는 현실이죠
jQuery 최신 버전으로 올리는 일은 여러 CDN에서 제공하는 주소만 따다 바꾸어 주면 되지 않나요? 과거 호환성 면에서도 큰 문제가 있다는 얘기는 별로 없는 것 같습니다.
jQuery 1.7에서는 .bind(), .live(), .delegate() 등을 뒤에서는 on() 메소드로 처리합니다. 윗분말대로 cdn 주소만 바꿔주면 땡입니다. Python 처럼 최신버전 구버전 고민할 필요 없어요.
.on( events [, selector] [, data], handler(eventObject) ) 이렇게 하면 더 불편지 않나요? $(‘선택자’).on() 이게 직관적이고 편한거 같은데 뭐가 좋은거죠?
얘기하신 용법처럼 그냥 선택한 객체에 직접 이벤트를 심을 땐 과거처럼 그대로 사용하실 수 있습니다. 글에 있는 Bind 사용 예에 나와 있습니다. 하지만 이젠 on() method의 arguments에 따라 과거 delegate() 혹은 live() 용법을 사용할 수 있으니 이벤트 관련 통합된 method가 생긴 것이지요.
delegate()과 live()를 썼던 이유는, 여러 객체에 같은 이벤트 핸들러를 심어줄 때, 객체마다 이벤트를 심는 것이 아니라, 공통 부모 객체 하나에 이벤트를 심어두고 event가 bubbling up 되면 catch 해서 하나의 이벤트 핸들러로 처리해 줄 수 있으니까 이벤트 심는 과정에서 부담이 덜 하죠. 그리고 지정했던 selector와 일치하는 자식 element가 나중에 추가되더라도 추가 작업 없이 같은 이벤트 핸들러가 자동 등록되니 편한 점도 있고요.