TIL 20231130

삭제 기능을 마치고 오늘 혹시몰라 테스트를 하고 있었는데

 

문제가 발생했다.

 

빈값을 입력하면

그대로 비밀번호를 입력해주세요 라고 alert 창이 뜨도록 했는데

끄면 또 다른 alert 창이 떴다..

 

아마 멈추지 않고 계속 내려가서,,? 

그래서 막아주는 ? 취소하는 ? 문법을 사용해야 했다.

 

사실 뭐라 검색해야 나오는지도 생각이 안나서 한참을 생각해보고 취소? 라고 검색해보았다.

찾아보니 세 가지가 나오는데

 

1. Event.preventDefault();
이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고 해당 이벤트를 취소한다.
(event.cancelable을 사용하여 이벤트 취소 가능 여부를 확인할 수 있다.)
즉, 해당 이벤트만 취소하며, 상위 요소의 이벤트가 호출되는 것은 막지 않는다.

2. Event.stopPropagation();
이벤트 캡쳐링과 버블링에 있어 해당 이벤트 이후의 전파를 막는다.
즉, 해당 이벤트의 상위 요소에 걸린 이벤트가 호출되지 않는다.

3. Event.stopImmediatePropagation();
해당 이벤트와 같은 레벨에 걸린 이벤트가 다른 리스너에서 불려지는 것을 막는다.
즉, 현재 이벤트와 같은 레벨에 걸린 이벤트를 취소하며, 상위 요소의 이벤트가 호출되는 것도 막는다.

 

이렇다고 한다.

 

그래서 나는 첫번째꺼를 이용해서 써보기로 했다.

 

 $(document).on("click", ".btn.btn-dark.del-btn", function () {

            let entryId = $(this).attr('id');

            let result = prompt("비밀번호를 입력해주세요");

         

            if (result == "") {

                alert("비밀번호를 입력해주세요")

                preventDefault();

            }

            deleteEntry(entryId, result);

        });

 

 

 

if (result == null){

                preventDefault();

            }

 

console.log로 찍어본 결과 null 값이 나왔고 

그래서 null 값에 관한 조건문을 추가 하기로 했다.

 

그랬더니 다행히 더는 두번이나 alert 창이 뜨지않았다.

 

 

아직 내가 원하는 것을 구현하는데 서치하는 능력이 부족하고 뭐라고 정리해서 검색해볼지에 대해서도 아직 많이 안해봐서 금방 찾진 못한다. 이것조차도 하는데 오래걸렸고 이해하려면 더 봐야 한다고 생각한다.

 

하지만 그래도 포기하지 않고 뭐라도 해보려고 하고 시도를 해서 결국 원하는 대로 해냈다는 자체가 나는 내 자신이 대견하다고 느낀다.. 

 

그래서 아직은 어렵지만 더 배워서 공부해서 지식의 범위를 확장시키자.