jQuery .off()를 사용한 이벤트 중복 방지 처리

on&off 이벤트 중복 방지 처리

개요

웹 개발을 하다 보면 keydown, click, change 등 다양한 이벤트를 바인딩하게 됩니다. 하지만 문제는 이벤트가 중복 등록되어, 원하지 않게 이벤트가 두 번 호출된다거나, 함수가 여러 번 실행되는 문제가 생길 수 있습니다. 특히 모달창을 여러 번 열고 닫을 때, 혹은 동적으로 요소를 다시 그릴 때 이런 문제가 왕왕 발생합니다. 오늘은 이를 예방하는 가장 간단하고 효과적인 방법을 소개하려 합니다. 하단에서 좀 더 자세히 살펴볼게요😃

 

왜 .off().on()을 써야 하나?📙

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

 

위 코드처럼 작성하면 #myButton에 기존에 등록된 이벤트가 그대로 남아 있어서 같은 이벤트가 여러 번 실행되는 문제가 발생합니다. 특히, myButton이 모달에 있는 버튼이라면 해당 모달을 여러 번 열고 닫는 상황에서 버튼을 클릭하면 이벤트가 중복됩니다.

 

예를 들어, 모달을 3번 열었다 닫는 과정에서 버튼을 3번 클릭한다면 이벤트도 해당 횟수만큼 누적되어 발생하게 됩니다. 그렇기 때문에 .off()를 사용하여 기존 이벤트를 먼저 제거하고 새로 이벤트를 등록하는 과정이 필요합니다.

 

예제📘

우리가 javaScript에서 사용하는 이벤트들은 크게 keydown, click, change 등이 있습니다. keydown은 검색 기능에서 검색어를 입력 후 엔터를 쳤을 경우에 많이 사용하는데 아래 예제를 함께 보겠습니다.

$('#searchInput').on('keydown', function(e) {
    if (e.key === 'Enter') {
        $('#searchButton').click();
    }
});

 

여기서도 위에서 언급한 문제와 동일하게 모달을 열닫 하거나 동적으로 요소를 다시 그릴 때, 탭 이동을 할 때 등 다양한 상황에서 중복 이벤트가 발생됩니다. 

$('#countrySelect').on('change', function() {
    const selected = $(this).val();
    loadCities(selected); // 나라에 따라 도시 목록 로딩
});

 

위 예시는 countrySelect이라는 드롭다운 옵션을 변경하였을 때, 해당 옵션(나라)에 따라 도시 목록을 로딩하는 예시입니다. 여기서도 .off()를 사용하지 않으면 이벤트가 중복되어 여러 번 호출하는 문제가 생깁니다.

 

마지막으로, 가장 많이 사용되는 click 이벤트도 동일한 문제가 발생 할 확률이 높습니다.

$("#btnSearch").click( function () {
    table.draw();
});

 

어떠한 테이블이 있을 때 btnSearch라는 버튼을 클릭 시 다시 테이블을 그리는 예제 코드입니다. 여기서도 .off() 처리가 되지 않아, 이벤트가 중복되면 검색 버튼을 클릭할 때마다 클릭한 횟수에 비례하여 테이블을 다시 그리는 현상이 발생할 수 있습니다.

 

해결📒

해결 방법은 정말 간단합니다. 각 이벤트 앞에 .off() 조건을 달아주면 끝이 나는데 위에서 예시로 들었던 이벤트들에 조건을 추가해 보겠습니다.

// off 조건 추가
$('#searchInput').off('keydown').on('keydown', function(e) {
    if (e.key === 'Enter') {
        $('#searchButton').click(); 
    }
});

// off 조건 추가
$('#countrySelect').off('change').on('change', function() {
    const selected = $(this).val();
    loadCities(selected); 
});

// off 조건 추가
$('#btnSearch').off('click').click( function () {
    table.draw();
});

 

여기서 한 가지 의문점이 드는 건, .off() 조건을 이용하면 이벤트를 제거하고 이후에 다시 등록하는 과정을 거친다는 이야기인데 이 과정에서 성능적인 문제는 없을까?라는 생각을 했습니다. 찾아본 결과, .off().on()은 대부분 하나의 버튼, 입력창, 혹은 특정 DOM 요소에 대해 실행되며, jQuery는 내부적으로 요소별 이벤트를 Map 형태로 관리하기 때문에 특정 이벤트를 제거하는 비용은 크지 않다고 합니다

 

또한, 이벤트 제거 및 재등록은 DOM 트리 변경에 비해 훨씬 빠르게 수행되므로 사용자 입장에서는 해당 조건으로 인한 지연이 체감되지 않는다고 합니다.

 

마지막으로, .off() 조건이 없어서 이벤트가 중복되어 발생하는 문제를 잡는 데 드는 시간과 리스크가 훨씬 크기 때문에, jQuery 쓸 때는 .off().on()을 습관처럼 사용하는 것이 예상치 못한 중복 실행, 성능 저하, UI 오류를 막는 가장 좋은 방법이라고 합니다😁

 

마치며

지금까지 jQuery에서 이벤트 중복을 방지하는 가장 간단하고 확실한 방법에 대해 살펴보았습니다. 저 역시 예전에는 이벤트 중복에 크게 신경 쓰지 않았지만, 최근 실무에서 관련 문제가 발생해 디버깅에 많은 시간을 들이면서 .off() 처리의 중요성을 실감하게 되었습니다. 독자 여러분도 꼭 습관적으로 적용하셔서 비슷한 문제를 미리 예방하시길 바랍니다🙇‍♂️