[Spring-Ajax] 이벤트가 중복될 때 한 번만 처리하도록 하는 방법

e.stopPropagation();

이벤트가 현재 요소에서 처리된 후, 상위 요소로 전파되지 않도록 중단. 이를 통해 상위 요소에 설정된 이벤트 핸들러가 호출되지 않도록 설정.

Example-1

// 데이터를 삭제하는 함수
function deleteItem(e){
e.stopPropagation(); // 이벤트 전파 중단

let seq = $(this).attr("data-seq");
let pwd = prompt("비밀번호를 입력하세요");

// 비밀번호를 입력하지 않으면 취소
if (!pwd) {
    alert("비밀번호를 입력하지 않았습니다.");
    return;
}

let answer = confirm("삭제하시겠습니까?");
if (!answer) return;

$.ajax({
    url: 'deleteGuestbook',
    method: 'POST',
    data: { seq: seq, pwd: pwd },
    success: function(response) {
        if (response === 'OK') {
            alert('삭제되었습니다.');
            init(); // 삭제 후 리스트 갱신
        } else {
            alert('삭제 실패: 비밀번호가 일치하지 않습니다.');
        }
    },
    error: function(xhr, status, error) {
        console.error("삭제 오류:", error);
        alert('삭제 중 오류가 발생했습니다.');
    }
});

}

e.stopPropagation() 사용 상황

• 이벤트 중복 : 이벤트가 의도치 않게 여러 번 발생할 경우, 특히 자식 요소와 상위 요소에서 모두 이벤트 처리할 때
• 버블링 방지 : 이벤트가 상위 요소로 전파되는 것을 방지해 특정 요소에서만 이벤트 처리할 경우
  
  → BUT. 보편적인 상황에서는 이벤트 전파 자체가 문제가 되지 않으므로, 다른 이벤트가 상위에서 처리되는 경우가 있을 때 사용
  

-> 이벤트가 의도치 않게 여러 번 발생하는 이유를 파악하는 방법

1. 콘솔 로그 및 디버깅

= 이벤트 발생 때마다 콘솔 로그 출력
ex) deleteItem 함수의 시작 부분에 console.log("Delete item clicked"); 를 추가하여 클릭 이벤트가 몇 번 발생하는지 확인

2. 이벤트 핸들러 확인

• 이벤트 핸들러가 중복되지 않도록 확인
  이벤트 리스너 추가 코드 여러 번 호출 시, 중복 등록이 발생 可
  특히, AJAX 응답 후에 이벤트 핸들러를 다시 등록하는 경우, 중복 가능성↑

3. 이벤트 전파 문제

상위 요소에서 발생한 이벤트가 하위 요소로 전파되면서 중복 가능

4. UI 요소 확인

HTML 구조가 잘못되어 있을 경우, 같은 버튼이 여러 번 렌더링되는 문제 발생 可
ex) AJAX로 동적으로 생성된 버튼에 이벤트 핸들러가 중복으로 적용 可'

5. 브라우저 개발자 도구

• 브라우저의 개발자 도구를 사용하여 이벤트 리스너 확인

• Elements 패널에서 특정 요소를 선택하고 Event Listeners를 확인

  function deleteItem(e) {
  console.log("Delete item clicked"); // 확인용 로그
  e.stopPropagation(); // 이벤트 전파 중단
  
  let seq = $(this).attr("data-seq");
  let pwd = prompt("비밀번호를 입력하세요");
  
  if (!pwd) {
      alert("비밀번호를 입력하지 않았습니다.");
      return;
  }
  
  let answer = confirm("삭제하시겠습니까?");
  if (!answer) return;
  
  $.ajax({
      url: 'deleteGuestbook',
      method: 'POST',
      data: { seq: seq, pwd: pwd },
      success: function(response) {
          if (response === 'OK') {
              alert('삭제되었습니다.');
              init(); // 리스트 갱신
          } else {
              alert('삭제 실패: 비밀번호가 일치하지 않습니다.');
          }
      },
      error: function(xhr, status, error) {
          console.error("삭제 오류:", error);
          alert('삭제 중 오류가 발생했습니다.');
      }
  });
  }

  }

  
  
  

방명록 만들기 Spring7 파일에서의 이벤트 중복 해제 적용

$(function(){
	init();
	$('#save').on('click', input);
});


// 전체 데이터를 다시 로딩
function init(){
	$.ajax({
		url: 'retrieveAll'
		, method : 'GET'
		, success: output
	})
}


// 로딩된 데이터 출력 함수
function output(resp){		// resp는 배열 함수일 것
	let tag = '';
	$.each(resp, function(index, item){
		tag +=`
		      <tr>
		       	<td class="idx">${index+1}</td>
		        <td class="name">${item["name"]}</td>
		        <td class="content">${item["content"]}</td>
		        <td class="date">${item["createDate"]}</td>
		        <td class="btn"><input type="button" class="btn" data-seq="${item["seq"]}" value="삭제">
				</td> 
			</tr>`;
	});
	
	$('tbody').html(tag);
	$('.btn').on('click', deleteItem);
}

// 데이터를 삭제하는 함수
function deleteItem(e){
	let seq = $(this).attr('data-seq');			// attr - 값 얻어오는 용도, 두 개 넣으면 값 바꿈
	let pwd = prompt("비밀번호를 입력하세요");
	
	let answer = confirm("삭제하시겠습니까?");
	if (!answer) return;
	
	e.stopPropagation();
	
	$.ajax({
		url: 'deleteGuestbook'
		, method: 'POST'
		, data : {"seq": seq, "pwd":pwd}
		// , async : false
		, success: init
	})
	// alert("asdfASDF");
}
 

// 방명록 데이터를 수집해서 ajax 기반으로 DB에 저장
function input(){
	let name = $('#name').val();
	let pwd = $('#pwd').val();
	let content = $('#content').val();
	
	let sendData = {"name":name, "pwd":pwd, "content":content};		// JSON 형태
	
	$.ajax({
		url: 'inputGuestbook'
		, method: 'POST'
		, data: sendData
		, success: function(){
			init();
			clearAll();
		}
	})	// ajax -> 중괄호 넣어 객체 형태로 데이터 전송
};


// 입력 상자의 데이터를 삭제
function clearAll(){
	$('#name').val("");
	$('#pwd').val("");
	$('#content').val("");