[JQuery] 이벤트 다중 발생과 해결

TL; DR

동일 DOM 요소에 등록되어있는 이벤트를 바꿔가며 동작하면, off() 메서드를 이용하여 이전에 등록되어 있던 이벤트를 삭제하고 수행 할 이벤트를 재등록 하자

이전 이벤트와의 이벤트 중복 실행 문제

JQuery를 사용하다보면 DOM 요소에 대한 이벤트를 등록할 수 있는 ON 키워드는 빼놓을 수 없는 요소가 된다.

최근 프로젝트를 진행하면서, PopUp Dialog를 만들고 해당 다이얼로그의 데이터만 변경해가며 사용자와 상호작용을 하는 UI를 구현한 적이 있다.

로컬 테스트에서는 아무런 문제없이 진행되는 듯 했으나. 테스트 서버로 업로드를 하고 나니, 해당 Dialog에서 값 저장을 위해 확인을 누를 때, 이벤트가 중복으로 발생하는 문제가 발견되었다.

버튼의 클릭이벤트를 사용하였기 때문에, 이벤트의 버블링으로인한 문제인가 싶어 stopPropagation()을 적용해보았으나 문제가 해결되지 않았다.

구글링을 한 결과, 기존에 등록되어있던 이벤트를 off()메서드로 삭제후 다시 등록해서 사용하라는 조언이 있었고 적용을 하였더니 의도한대로 정상작동 하는것을 보았다.

문제 발생 이유

짧은 식견으로 이 문제를 해석하자면, 이벤트를 등록하는 메서드인 on()은 이전에 등록되어 있던 이벤트를 덮어쓰지 않고 추가만 하는 형태로 작동하기 때문에 이런 문제가 발생한것 같다.