[event.preventDefault()] 브라우저의 기본 동작을 막고,우리가 원하는 다른 동작을 넣을 수 있게 해주는 속성?!

안녕하세요 웹파트 OB 손지유입니다.

오늘은 자바스크립트에서 자주 사용하는 기능인, event.preventDefault() 속성에 대해 알아보도록 하겠습니다!

어려운 속성은 아니지만, 놓치기 쉬운 부분이기에! 더 섬세한 작업을 위해 꼭 알아두면 좋을 것 같습니다 :)

 

🔑 event.preventDefault() 는 무엇인가?

event.preventDefault() 속성은 자바스크립트에서 자주 사용되는 기능입니다.

간단하게 말하면, "브라우저가 기본적으로 하려고 하는 동작을 멈추게 한다"고 생각하면 됩니다.

기본동작 거-절!

---

🔑 event.preventDefault() 는 언제 사용하면 될까?

우리가 브라우저에서 버튼을 클릭하거나 링크를 누르면!!

브라우저는 기본적으로 정해진 동작을 수행합니다.

ex) 버튼을 누르면 폼(form)이 제출되는 동작

ex) 링크 클릭 시 웹페이지가 새로 열리는 동작

그런데 만약 우리가 자바스크립트를 이용해서 그 동작을 막고, 그 대신 우리가 원하는 다른 동작을 시키고 싶다면?

그럴 때  event.preventDefault()를 사용할 수 있습니다.

그럼, event.preventDefault()를 사용하는 구체적인 예시를 살펴볼까요?

 

EX) 버튼 클릭 시 폼 제출 막기

보통 폼에서 '제출하기' 버튼을 누르면 그 폼은 서버로 보내집니다.

그러나 사용자가 잘못된 데이터를 입력했을 때 경고 메시지를 띄우고 폼 제출을 막아야 하는 상황과 같이

폼이 서버로 넘어가지 않길 원하는 상황들이 생길 수 있습니다.

바로 이럴 때! event.preventDefault()를 사용하면 됩니다.

<form id="myForm">
  <input type="text" id="name" placeholder="이름을 입력하세요" />
  <button type="submit">제출하기</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function(event) {
    const nameInput = document.getElementById('name').value;
    
    if (nameInput === '') {
      alert('이름을 입력해야 합니다!');
      event.preventDefault();  // 폼 제출을 막음
    }
  });
</script>

 

위 코드와 같이 만약 사용자가 이름을 입력하지 않고 '제출하기' 버튼을 누르면

폼이 제출되지 않도록 막아주는 것이 event.preventDefault()가 하는 일입니다!

위 경우, 폼이 제출 되지 않고 "이름을 입력해야 합니다!"라는 경고 메시지가 뜨겠네요!

---

🔑 event.preventDefault() 와 자주 같이 쓰이는 속성

event.preventDefault()와 자주 같이 쓰이는 속성 중 하나는 event.stopPropagation()입니다.

이 속성은 이벤트가 부모 요소로 전달되는 걸 막는 속성인데요.

브라우저에서는 이벤트가 발생하면 그 이벤트가 부모 요소로 계속 전달돼서 다른 동작이 일어날 수 있는데,

그런 것을 막고 싶을 때 event.stopPropagation()을 사용하곤 합니다.

 

예를 들어, <div> 안에 버튼이 있고, 그 <div>에도 클릭 이벤트가 걸려 있다면,

버튼을 눌렀을 때 그 클릭 이벤트가 부모인 <div>로 전달되지 않도록 할 때 사용하는 것입니다.

<div id="parentDiv">
  <button id="myButton">버튼</button>
</div>

<script>
  const button = document.getElementById('myButton');
  const parentDiv = document.getElementById('parentDiv');

  button.addEventListener('click', function(event) {
    alert('버튼 클릭!');
    event.stopPropagation();  // 부모 요소로 이벤트 전달 막음
  });

  parentDiv.addEventListener('click', function() {
    alert('부모 div 클릭!');
  });
</script>

즉, 위 코드에서는 버튼을 클릭해도 부모인 <div>의 클릭 이벤트가 실행되지 않습니다.

왜냐하면 event.stopPropagation()으로 이벤트 전파를 막았기 때문이죠!!

---

 

event.preventDefault()는 브라우저의 기본 동작을 막고,

우리가 원하는 다른 동작을 넣을 수 있게 해주는 아주 중요한 기능입니다.

그리고 event.stopPropagation()은 이벤트가 부모 요소로 전달되는 걸 막아주는 역할을 하기 때문에

이 둘을 같이 사용하면 훨씬 더 정교한 이벤트 처리가 가능해지는 것이죠 (●'◡'●)

 

우리가 만든 웹사이트가 원하는 대로 정확하게 동작할 수 있게 해주는 event.preventDefault() 속성을 적절하게 사용하여

더 나은 사용자 경험을 제공하는 웹 개발자로 성장해봅시다!

🤜🤛