[JQuery] 특정 또는 모든 이벤트 제거 하는 방법

화면을 만들다보면 등록된 이벤트를 삭제해야하는 경우가 있습니다.

이때, 이벤트 등록된 이벤트를 삭제하는 방법을 알려드리겠습니다.

 

.off()

jquery에서는 이벤트 삭제를위해서는 .off()를 통해서 삭제를 도와주고 있습니다.

삭제를 하는 방법에는 4가지 방법이 있는데 아래에 정리해보도록 하겠습니다.

 

1. 특정이벤트와 핸들러 삭제하기

// 이벤트 핸들러 추가
function myHandler(event) {
    console.log('이벤트 실행');
}
$('#myElement').on('click', myHandler);

// 이벤트 핸들러 삭제
$('#myElement').off('click', myHandler);

 

2. 특정이벤트 전체 삭제하기

// 클릭 이벤트 삭제
$('#myElement').off('click');

 

3. 모든 이벤트 삭제하기

// 모든 이벤트 삭제
$('#myElement').off();

 

4. 네임스페이스를 사용한 이벤트 삭제

// 이벤트 등록
$('#myElement').on('click.myNamespace', function () {
    console.log('클릭 이벤트');
});
$('#myElement').on('mouseover.myNamespace', function () {
    console.log('마우스 오버 이벤트');
});

// 특정 네임스페이스의 이벤트 삭제
$('#myElement').off('.myNamespace');