자바스크립트

웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.

2025.02.22 02:57

jQuery 이벤트 제거: .off() 메서드 사용하기

  • 나우호스팅 21일 전 2025.02.22 02:57
  • 14
    0

jquery .off()


jQuery .off() 메서드


jQuery .off() 메서드는 이벤트 핸들러를 제거하는 데 사용됩니다. 이벤트 핸들러는 jQuery 메서드에 의해 등록된 함수입니다. .off() 메서드는 이벤트 핸들러를 제거하여 메모리 낭비를 방지하고 성능을 향상시킵니다.

.off() 메서드의 사용법


# 1. 기본 사용법


#hostingforum.kr
javascript

// 이벤트 핸들러 등록

$('#myButton').on('click', function() {

    console.log('클릭!');

});



// 이벤트 핸들러 제거

$('#myButton').off('click');



# 2. 이벤트 핸들러 제거 (여러 이벤트)


#hostingforum.kr
javascript

// 이벤트 핸들러 등록

$('#myButton').on('click mouseover', function(event) {

    if (event.type === 'click') {

        console.log('클릭!');

    } else if (event.type === 'mouseover') {

        console.log('마우스 오버!');

    }

});



// 이벤트 핸들러 제거 (클릭 이벤트)

$('#myButton').off('click');



// 이벤트 핸들러 제거 (모든 이벤트)

$('#myButton').off();



# 3. 이벤트 핸들러 제거 (이벤트 이름과 데이터)


#hostingforum.kr
javascript

// 이벤트 핸들러 등록

$('#myButton').on('click', { foo: 'bar' }, function(event) {

    console.log(event.data.foo); // bar

});



// 이벤트 핸들러 제거 (이벤트 이름과 데이터)

$('#myButton').off('click', { foo: 'bar' });



.off() 메서드의 내부 구현


jQuery .off() 메서드는 다음과 같은 내부 구현을 사용합니다.

#hostingforum.kr
javascript

off: function( types, selector, data, fn ) {

    var elem, i, l, off, orig, handle, namespace;



    types = types.split(' ');

    selector = selector || '';

    data = data == null ? undefined : data;

    fn = fn == null ? undefined : fn;



    for ( i = this.length; i-- > 0; ) {

        elem = this[i];



        if ( selector && selector !== '*' ) {

            if ( !elem.matches(selector) ) {

                continue;

            }

        }



        for ( l = types.length; l--; ) {

            handle = elem._data('events')[types[l]];



            if ( handle ) {

                orig = handle.orig;

                if ( fn === undefined && orig === fn ) {

                    handle.handle = null;

                } else if ( fn === undefined ) {

                    for ( i = handle.length - 1; i >= 0; i-- ) {

                        if ( handle[i].orig === orig ) {

                            handle.splice(i, 1);

                            break;

                        }

                    }

                } else if ( handle[handle.length - 1] === fn ) {

                    handle[handle.length - 1] = null;

                }

            }

        }

    }



    return this;

}



결론


jQuery .off() 메서드는 이벤트 핸들러를 제거하는 데 사용됩니다. 이벤트 핸들러는 jQuery 메서드에 의해 등록된 함수입니다. .off() 메서드는 이벤트 핸들러를 제거하여 메모리 낭비를 방지하고 성능을 향상시킵니다. 내부 구현을 이해하면 jQuery .off() 메서드의 사용법을 더 잘 이해할 수 있습니다.

이 게시물에 포함된 라이브러리

[PHP] log - 자연로그
[PHP] dl - 런타임에 PHP 확장을 로드합니다.
[PHP] defined - 주어진 이름의 상수가 존재하는지 확인합니다.
[PHP] define - 명명된 상수를 정의합니다.
  • profile_image
    나우호스팅 @pcs8404 

    호스팅포럼 화이팅!

    댓글목록

    등록된 댓글이 없습니다.

  • 자바스크립트 포인트 정책
      글쓰기
      50P
      댓글
      10P
  • 전체 35건 / 1 페이지

검색

게시물 검색