[jQuery] 클릭 이벤트 버블링 현상

문제 상황

 파일 추가 버튼을 눌렀을 때, append가 1개씩 되는게 아니라 중복되서 늘어나는 현상 발생

문제 원인

 jQuery 클릭 이벤트 실행시 1회가 아니라 여러 번 실행되는 경우가 있는데 이를 Click Event Bubbling 현상이라고 함. 
 이런 현상이 일어나는 이유는 사용자가 마우스로 버튼을 클릭했을 때 
 버튼을 감싸고 있는 부모 태그들도 이 클릭 이벤트에 반응을 하기 때문임

해결책

 1. .off() 메서드 사용 (좋은 방법은 아님)
 
 - $(element).off().on('click', function() {
 		//function
 	});
    
 2. .stopPropagation() 사용
 
 - 현재 이벤트가 부모에게 전파되지 않도록 중지
 
 - $(element).on('click', function(e) {
 		e.stopPropagation();
        //function
   });
   
 3. .preventDefault() 사용
 
 - 현재 이벤트 기본 동작 중지
 
 - #('a').on('click', function(e){
 		e.preventDefault();
   });

참고자료

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=zimny327&logNo=221474775919