[HTML/CSS/JS] preventDefault, alert, confirm, stopPropagation

happyyeom·2024년 10월 23일

preventDefault

html에서 a태그는 페이지를 이동시키는 고유의 동작이 있다. preventDefault라고 말그대로 기본(default), 이런 동작들을 중단(prevent)시키는 여러가지 방법이 있다.

e.preventDefault

HTML onclick

html태그에 oncilck추가한 후, event.preventDefault();라는 자바스크립트 코드를 추가해주는 방법이다.
html

<script src="https://cdnjs.cloudflare.com/ajax/libs/
             jquery/3.7.1/jquery.min.js"></script>

<a onclick="event.preventDefault();"
   href="https://www.naver.com/" target="_blank">네이버 새창으로 열기</a>

jQeury click event

위와 비슷한 방식으로 jQuery의 click이벤트를 사용해 함수를 생성한다.

function(e){
e.preventDefault();
}

이런 형식으로 사용한다.
html

<script src="https://cdnjs.cloudflare.com/ajax/libs/
             jquery/3.7.1/jquery.min.js"></script>

<a href="https://www.naver.com/" target="_blank">네이버 새창으로 열기</a>

$('a').click(function(e){
  e.preventDefault();
})

return false

HTML onclick

html태그에 oncilck추가한 후, return false;라는 자바스크립트 코드를 추가해주는 방법이다.
html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<a onclick="return false;"href="https://www.naver.com/" target="_blank">네이버 새창으로 열기</a>

jQeury click event

위와 비슷한 방식으로 jQuery의 click이벤트를 사용해 함수를 생성한다.
html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<a href="https://www.naver.com/" target="_blank">네이버 새창으로 열기</a>

$('a').click(function(){
  return false;
})

알림창 띄우기

웹을 사용하다보면 이렇게 위에 알림창이 뜨면서 우리에게 메세지를 전달하고 받는 경우가 있다. 이것을 구현해보자.

alert

alert은 우리에게 메세지를 알려주는 알림창이다.

alert("문구");

이렇게 사용하고 괄호안 쌍 따옴표("")안에 들어가는 문구가 들어간 알림창이 뜬다.

confirm

confirm은 우리에게 확인 또는 취소를 받는 확인창이다.

confirm("문구");

우리가 확인창에서 확인을 누른다면 confirm("문구")는 true가 되고 취소를 누른다면 false가 된다.

이 값을 변수에 넣어서 사용할 수 있다. 변수에 넣어서 값을 출력하여 확인해보자.확인창에서 "확인"을 클릭한다면

사용자의 의견에 따라 링크로 이동시키기

네이버 링크로 연결된 a태그를 눌렀을 때, confirm으로 사용자의 의견을 물어보고 확인을 누르면 이동, 취소를 누르면 이동하지 않는 코드를 구현해보자.
version 1
html

<script src="https://cdnjs.cloudflare.com/ajax/libs/
             jquery/3.7.1/jquery.min.js"></script>

<a href="https://www.naver.com/" target="_blank">
  네이버 새창으로 열기</a>

console.clear();
$('a').click(function () {
  let yesorno = confirm(
    "네이버(https://www.naver.com/)를 새창에서 여시겠습니까?"
  );

  console.log(yesorno);
  if (!yesorno) {
    return false;
  }
});

version 2
html

<script src="https://cdnjs.cloudflare.com/ajax/libs/
jquery/3.7.1/jquery.min.js"></script>

<a네이버(https://www.naver.com/)를 
   새창에서 여시겠습니까?") == false ) { return false; }" 
   href="https://www.naver.com" target="_blank">
  네이버 새창으로 열기</a>

stopPropagation

"propagation"은 "전파"라는 뜻으로 stopPropagation은 "더 이상의 전파를 막는다."라는 뜻이고 그 역할을 수행한다. 아래 코드로 이해해보자.
이렇게 코드들을 부모 자식 관계로 만들어두고 해당 태그를 클릭하면 배경색이 빨간색으로 바뀌도록 세팅해뒀다. reset버튼을 누르면 다시 원래대로 돌아온다. 눌러보면 알 수 있듯 가장 최상위 태그를 클릭했을 때에는 최상위 태그 클릭 이벤트만 동작하지만, 가장 최하위 태그를 클릭했을 때에는 최하위 태그부터 최상위 태그의 클릭 이벤트까지 모두 동작한다. 즉 이벤트가 전파된다. stopPropagation을 사용하면 이 전파를 막는다.
preventDefault와 유사한 기능을 갖는다.
stopPropagation(); 또는 return false;로 사용할 수 있다.

위 코드는 div에게는 return false;로 span은 e.stopPropagation();로 전파를 금지해두었다. div의 하위 태그를 클릭하면 div태그에게까지만 이벤트가 전파되어 배경색이 변하고 div태그 이후로는 전파를 중단시켜 배경색이 변하지 않는다. 또한 span태그를 클릭해도 오직 span태그만 배경색이 바뀌는 것을 볼 수 있다.