이벤트 해제 unbind 활용 [jQuery] :: 마이구미

이번 글은 이벤트 해제에 관한 글을 작성할 것이다.

이벤트를 해제할 경우 쓰는 방법은 많이 있다.

대표적으로 removeEventListener(), off(), unbind() 를 사용할 것으로 생각한다.

본인은 개인적으로 unbind()를 사용한다.

off()와 unbind()는 jquery의 메소드이다.

unbind()이 개선되어 나온 것이 off()이다.

그러므로 jquery 버전이 1.7이하인 곳은 off() 메소드를 지원하지 않는다.

그래서 무슨 말을 할껀데 서론이 기냐...

또 본인의 경험담으로 이야기를 해보겠다.

특정 태그 영역에서 이벤트를 발생시키기 위하여 scroll 메소드를 사용하였다.

그리곤 이벤트를 발생되면 이벤트를 해제하기 위해 unbind('scroll')를 이용해 이벤트를 날려버렸다.

jQuery(document).bind('scroll', function() {

                if ( jQuery(document).scrollTop() > position && position > ) {
                    
                    jQuery.getJSON(url, function(s){
                        //callback
                    })

                    jQuery(document).unbind('.scroll');
                    return;
                } 

            });

하지만 의도치 않은 결과가 나왔다.

이미 다른 의도로 scroll 메소드를 이용하고 있었는데 unbind() 때문에 scroll 이벤트가 날아간 것이다.

scroll을 여러 개를 쓸 수 없는 생각에 멘붕에 빠졌다.

하지만 방법이 있었다.

해당 이벤트 뒤에 name을 추가해주면 된다.

jQuery(document).bind('scroll.test', function() {

                if ( jQuery(document).scrollTop() > position && position > 0 ) {

                    jQuery.getJSON(url, function(s){
                        //callback
                    })

                    jQuery(document).unbind('.test');
                    return;
                } 

            });

저런 식으로 scroll 뒤에 .test를 추가하여 .test을 unbind() 시켜버렸다.

그 결과 기존 scroll 이벤트는 날아가지 않고 추가한 scroll 이벤트만 날아가게 되었다.

원하는 결과를 얻게 되었다.

그리고 다른 것들도 잘 되나 궁금해서 click 이벤트 또한 시도해보았다

jQuery('#right').on('click',function(){
    alert("!!")
    jQuery('.test').unbind()
})

jQuery('#right').on('click.test', function(){
    alert("@@")
})

알림창 !! 만 뜨는 것을 확인할 수 있었다. Good!

유용한 팁이라고 생각한다.