jQuery를 사용하여 웹 페이지 내 버튼이나 링크에 클릭 핸들러를 바인딩할 때, 개발자들이 가장 흔하게 사용하는 방식은 $(id).click() 선언입니다.
하지만 이 방식은 페이지가 처음 로드될 때(DOM Ready) 화면에 이미 존재하던 요소에만 이벤트가 걸린다는 치명적인 단점이 있습니다. Ajax 통신이나 자바스크립트 append()를 통해 실시간으로 화면에 새로 생성된 동적 앨리먼트(Dynamic Element)에는 클릭 이벤트가 전혀 작동하지 않는 문제가 발생합니다.
이번 포스팅에서는 동적 요소에도 완벽하게 이벤트를 위임하는 $(document).on('click')의 올바른 활용법과, 이 과정에서 필연적으로 마주하게 되는 이벤트 중복 등록(클릭 횟수 누적 호출) 버그를 한 줄로 해결하는 테크닉을 공유합니다. 아래 본문을 마우스로 드래그하여 깔끔한 텍스트 반전 효과를 확인해 보세요!
동적 앨리먼트 제어를 위해
$(document).on('click', 'id', function) 구조를 사용하면 추후 생성된 객체에도 이벤트가 훌륭하게 바인딩됩니다. 하지만 단일 페이지 애플리케이션(SPA) 구조나 히스토리 백/포워드(Back/Next), 특정 모듈이 반복 실행되는 환경에서는 페이지가 새로고침되지 않고 화면이 전환될 때마다 동일한 클릭 이벤트가 브라우저 세션에 중복으로 겹쳐 등록됩니다. 이로 인해 나중에는 버튼을 딱 한 번만 눌렀는데도 alert 창이 대여섯 번씩 연속으로 튀어나오는 심각한 스크립트 오작동이 유발됩니다.
1. 일반 클릭 이벤트 vs 동적 위임 이벤트 비교 소스코드
가장 직관적인 정적 바인딩과 동적 생성 앨리먼트까지 커버하는 위임형(Delegated) 정석 스크립트 선언 방식의 문법 차이점입니다.
// [기존 방식] DOM 로드 시점에 존재하는 요소만 이벤트 매핑 (동적 요소 작동 불가)
$("#btn_click").click(function() {
alert("클릭 이벤트가 실행되었습니다.");
});
// [대안 방식] document 전체에 이벤트를 위임하여 추후 동적 생성된 요소까지 자동 매핑
$(document).on("click", "#btn_click", function(e) {
alert("새로 생성된 버튼에서도 정상 작동합니다.");
});2. 이벤트 버블링 및 중복 등록 방지 (stopImmediatePropagation)
앞서 언급한 이벤트 중복 누적 버그를 해결하려면 클릭 이벤트 핸들러가 실행되는 최상단 라인에 브라우저 내장 메서드인 e.stopImmediatePropagation()을 선언해 주어야 합니다.
이 한 줄의 코드는 현재 노드에 걸려 있는 다른 동일한 이벤트 리스너들이 체인 형태로 추가 실행되는 것을 즉시 차단(Immediate)하고, 이벤트가 부모 DOM 요소로 거슬러 올라가는 버블링 현상을 완벽하게 봉쇄하여 메뉴를 아무리 많이 오가도 무조건 alert이 단 한 번만 실행되도록 안정성을 보장해 줍니다.
// 이벤트 중복 누적 오류가 완벽히 해결된 실무형 코드
$(document).on("click", "#btn_click", function(e) {
// [핵심] 현재 이벤트 외에 중복 등록된 동일 핸들러의 실행을 즉시 강제 중단
e.stopImmediatePropagation();
alert("페이지를 몇 번을 이동했다가 돌아와도 무조건 단 한 번만 실행됩니다.");
});3. jQuery 공식 이벤트 제어 및 API 레퍼런스
본 포스팅에서 다룬 이벤트 위임(Event Delegation) 메커니즘의 상세 스펙과 stopImmediatePropagation(), stopPropagation(), preventDefault() 메서드 간의 물리적인 기능적 차이점에 대한 공식 명세는 아래 jQuery 기술 저장소 버튼 링크를 통해 정확히 체크해 보실 수 있습니다.
4. 맺음말
동적 화면 전환이 잦은 모던 웹 인터페이스나 비동기 Ajax 데이터 렌더링이 주를 이루는 프로젝트에서 이벤트 라이프사이클 관리를 소홀히 하면 시스템 메모리 누수와 UI 오작동의 주범이 됩니다. 오늘 소개해 드린 전파 차단 메서드를 핸들러 초입에 습관적으로 결합해 두어 더욱 견고하고 안정적인 프론트엔드 자바스크립트 아키텍처를 구현해 보세요!