웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > jquery

제이쿼리 live() 메소드 대신 on() 메소드를 사용하는 방법

Last Modified : 2018-07-25 / Created : 2016-08-29
15,100
View Count


구버전의 제이쿼리를 사용하여 작성된 코드에서는 이벤트 메소드로 live(), delegate(), bind()등을 볼 수 있습니다. 최근의 제이쿼리에는 통합 메소드 .on()이 사용되므로 이들 메소드 대신 통합 메소드를 사용하는 것이 맞겠습니다. 대부분의 이벤트 바인딩에 on() 메소드가 적용됩니다. 그렇다면 기존의 live() 메소드와 on() 메소드는 차이가 무엇인지 알아보고 여기에 대하여 알아보도록 하겠습니다.




# jQuery live() 메소드는 무엇인가

먼저 live() 메소드는 무엇일까요? live() 메소드는 웹문서에 존재하는 노드 요소가 현재는 존재하지 않으나 추후 이벤트 또는 비동기 방식으로 인하여 새롭게 생성되는(발생하는) 경우에 대비하여 사용됩니다. 쉽게 얘기하자면 클릭 등의 특정 이벤트를 만들되 이 이벤트가 동작되는 시점은 지금 당장이 아니라 해당 노드 요소가 생성된 이후가 될 수 있도록 하는 것입니다. 이는 현재 없는 노드에 이벤트 예약을 걸어두는 것과 같죠. 그럼 다음의 예제를 통하여 기존의 live() 코드가 on() 통합메소드로 바뀌는 과정을 확인해보시기 바랍니다.


! 제이쿼리를 사용한 live() 이벤트 on() 변경하기 예제소스

<div>
   <span id="test">Click</span>
</div>

@ live.js
$('#test').live('click', function() {
  alert('Live event method !!');
});

먼저 위 코드는 deprecatedlive() 메소드가 사용되었으며 click의 문구를 가진 span 태그를 클릭하면 동작하게 됩니다. 위 코드에 사용된 제이쿼리를 새로운 버전의 라이브러리로 바꾸고 코드를 마이그레이션 하려면 당연히 live() 메소드 역시 on()으로 변경해야만 합니다. 이때 위 코드의 제이쿼리는 아래와 같이 바꿀 수 있겠습다.
$('div').on('click', '#test', function() {
  alert('On event method !!')
});

여기까지 살펴보면 문법적으로 크게 다르지 않습니다... 일단 on()의 첫번째 매개변수로 이벤트 타입을 설정할 수 있으며 위에서는 클릭이벤트가 선언되었습니다. 그 다음은 대상인 타겟 요소를 콤마 안에 설정하여 됩니다.

여기서 잠깐!!! 맨 처음 시작되는 부분이 타겟 대상이 아니라 매개변수에 타겟 요소가 설정되었는데 이 부분이 가장 큰 차이점으로 on() 메소드의 앞에는 타겟 대상의 부모요소가 됩니다. 물론 부모요소의 범위는 너무 넓으나 노드 중에서 가장 상단의 body도 될 수 있을 것입니다. 하지만 이는 좋은 방법이 아니며 가장 가까운 요소를 선택하는 것이 가장 효율적인 방법이 될 것이며 권장됩니다. 즉 div가 그 대상이겠습니다.



# 마치면서

여기까지 변경된 코드를 설정하는 것까지 알아보았습니다.. 기존의 이벤트 메소드가 아닌 통합 메소드 on()을 사용하는 것은 다양한 장점이 있으나 편리함도 빼놓을 수 없겠습니다. 만약 이벤트를 제거하기 위해서는 반대되는 메소드를 사용하여야 했으나 on() 메소드는 off()를 사용하므로써 언제든 이벤트를 빠르고 간단하게 제거할 수 있겠습니다. 이것만으로도 매우 편리할 수 있습니다.

Previous

ajax를 사용하여 로딩 문구 만들기

Previous

jQuery를 사용하여 long polling을 구현하는 방법은?