jQuery seletor event 해제하기 / event override

jQuery seletor event 해제하기 / 삭제하기 / event override

 

 

이벤트가 공통 script 파일에 지정되어 있어서 변경이 어려운 경우.

특정 페이지에서만 seletor에 대한 event를 변경하고 싶은 경우.

event override의 개념 적용이 필요한 경우.

 

위에 나열한 경우에 대해 한 번은 고민한적이 있을텐데

너무나도 간단하게 적용하는 방법이 있어서 소개하고자 한다.

 

 

 

특정한 selector에 event별 handler를 적용하고자 하는 경우, on method를 많이 사용한다.

bind, delegate, live 등 과거에 사용하던 모든 것을 on으로 대체가 가능한데

event 명시는 다음과 같은 방식으로 많이들 선언한다.

 

$("#ojava").on("click", function () {

blar blar function contents

});

 

 

이미 많은 부분에서 사용하고 계실 것으로 생각되며

jquery API Document에서 더 상세하게 사용방법을 안내하고 있으므로

해당 내용은 링크하여 둡니다.

 

jQuery API Document : .on()

 

 

 

 

on을 통해서 event와 handler를 명시하고 있는데 이 내용을 삭제하거나

해당되는 selector에 다른 event를 override 하고 싶은 경우에는 on과 반대되는

성격의 method인 off를 사용하면 됩니다.

 

on으로 선언한 내용을 해제하는 방법이 off라니... 으아

 

 

 

off를 사용하는 방법은 간단합니다.

위에서 특정한 selector를 대상으로 event를 할당한 내용을 삭제하고 싶다면

아래와 같이 selector와 함께 삭제하고자 하는 event를 선언합니다.

 

$("#ojava").off("click");

 

이에 대해서 API에서는 $(selector 선언부).off("click", "**") 의 형태로도

소개하고 있으나, handler 부분을 굳이 선언하지 않고 event명만 기술해도 관계없는 듯 합니다.

 

이마저도 부족하다. 해당 selector와 연계된 모든 event를 삭제하고 싶다!

그런 경우는 아무런 매개변수 없이 method를 호출하면 됩니다.

 

$("#ojava").off();

 

 

 

여기서 조금 더 응용해서 바로 연속으로 click event를 새로 할당해서

override의 개념처럼 사용할 수 있습니다.

 

$("#ojava").off("click").on("click", function () {

alert("on click event change!");

});

 

 

 

이와 관련한 내용은 on 사용 방법을 안내하는 API에서도 소개하고 있으며

event trigger에 대한 사항 등 on을 사용할 때 알아두면 좋은 사항이 참 많습니당.

 

off method에 대해 API 문서에서는 on을 사용해서 적용된 event handler를 삭제하는 용도라고

소개하고 있으나 동일한 event에 대해 변경적용한다는 의미에서 제 맘대로 override 라고 써봤습니다.

 

 

jQuery API Document : .off()

 

 

 

부디 해결하고자 하는 문제의 답이 되었기를 바랍니당. 오늘도 칼퇴!

다음 번 포스팅은 언제하려나.. ㅎ_ㅎ