사슴 코딩 로그

jQuery를 이용할때 이벤트를 걸며 정말 많이 쓰여지는 이벤트 핸들러 메소드들이다. 
jQuery에서 많이 사용되는 이벤트 연결 방법은 최근까지 여러 용법이 쓰여져 왔다. 이런 많은 방법이 함께 사용되면서 상황에 따라 어떤 것을 써야 할지 고민하게 되고, 또 서로 다른 용법으로 혼란을 줄 수도 있었다. 그리고 특히 난 on과 live의 차이가 궁금했다.
그리하여, 찾아보고 정리를 좀 해보았다.

1. on
사용 예)

$("#test").on("click", function() { 
    //do something 
});

웹프로그래밍을 할때 나는 클릭 이벤트는 항상 이 방식으로 걸어준다. 회사 공통도 이렇게 맞추자고 제안하였다.

일단 on은
1. 단일 요소를 각 이벤트 처리기에 연결한다.
2. 복제된 요소도 이 이벤트 처리를 받을 수 있다.
3. bind() , live() , delegate() 메소드의 기능이 한번에 통합되어 있다. 

공식적으로도 버전이 올라갈수록 on을 쓰는것을 권장한다고 한다.
bind, live, delegate의 비효율성을 없애고 on으로 통합한다고.
서두에서 말했던것처럼 혼란을 막고자 1.7버전부터 과거부터 축적되어 사용되던 여러 용법을 통합하려는 시도로 on 메소드가 나왔다..그러하다..라고 하는데..3번은 좀 더 자세히 알아봐야겠다.

2. live
사용 예)

$("#test").live("click", function() { 
    //do something 
});

얼핏보면 on과 live는 똑같이 동작한다. 그래서 차이가 더 궁금해졌다.

live의 가장 큰 특징은
1. 아직 생성되지 않은 엘리먼트에도 미리 이벤트를 걸어둘수 있다!!!
2. 1.7버전 이후로는 사용되지 않는다..

라는 것이다.

공식적인 글들을 좀 찾아보니..

"delegate()과 live()를 썼던 이유는, 여러 객체에 같은 이벤트 핸들러를 심어줄 때, 객체마다 이벤트를 심는 것이 아니라, 공통 부모 객체 하나에 이벤트를 심어두고 event가 bubbling up 되면 catch 해서 하나의 이벤트 핸들러로 처리해 줄 수 있으니까 이벤트 심는 과정에서 부담이 덜 하죠. 그리고 지정했던 selector와 일치하는 자식 element가 나중에 추가되더라도 추가 작업 없이 같은 이벤트 핸들러가 자동 등록되니 편한 점도 있고요."
라고 한다.

1년차때 동적으로 ajax 결과 리턴받은다음에 html 코드를 삽입하는 코딩을할때, 추가되는 엘리먼트에 click()이벤트가 먹지 않아서 뭣도모르고 live로 하니 되서 넘어갔던 기억이 난다.

결론은..1.7버전 이후로는 bind, delegate, live 장점을 모두 모아놓은 on만 쓰자..on도 다 동적 바인딩이 되니..라는거다.