✅preventDefault()

form을 통해서 어떤 데이터를 전송하거나 그 외 여러 이벤트가 발생할 때 새로고침이 발생한다. 그럴 때마다 브라우저가 다시 시작하게 되는데 그걸 막는데 사용되는게 preventDefault()이다.

html

<form id="clickJS">
   <input type="text" placeholder="write"/>
   <input type="submit" value="click">
</form>

자바스크립트

const click = document.getElementById("clickJS");
const input = click.querySelector("input");

function before_preventDefault(){
  const value = input.value;
  console.log(value);
}
click.addEventListener("submit", use_preventDefault);

html에서 submit이라는 이벤트가 발생하는 코드를 작성했다. click하는 순간 새로고침이 발생해서 브라우저가 다시 시작하게 된다. 이런식으로 매번 새로고침이 되서 브라우저가 다시 시작하는건 좋지 않다. 이러한 문제를 막기 위해서 preventDefault를 사용해서 이러한 문제를 막을 수 있다.

function using_preventDefault(event){
  event.preventDefault();
  const value = input.value;
  console.log(value);
}

매개변수로 event를 선언하면 자동으로 이벤트가 발생한 값을 함수에 받을 수 있다. event.preventDefault() 간단하게 한 줄로 새로고침을 막을 수 있다.

✍🏻 preventDefault는 DOM을 통한 이벤트의 전파를 막지않습니다.

✅ stopPropagation()

stopPropagation()은 이벤트 발생을 막아주는 메서드이다. 자바스크립트는 하위에서 상위로 이벤트가 전파한다. 이러한 경우를 막고 싶을 때가 있다.

<div onclick="show_event()">
   <button onclick="start_event()">Click Me!!</button>
</div>

<script>
   function show_event(){
      console.log("나는 부모야");
   }     
   function start_event(){
      
      console.log("나는 자식이야");  
   }
</script>
->
  나는 자식이야
  나는 부모야

이 코드를 실행해보면 두 문구가 동시에 실행된다. 이러한 원인은 자바스크립트는 하위에서 상위로 이벤트가 전파되는 특성 때문이다. 이러한 문제를 해결하기 위해 stopPropagation()가 필요하다.

<div onclick="show_event()">
   <button onclick="start_event()">Click Me!!</button>
</div>

<script>
   function show_event(){
      console.log("나는 부모야");
   }     
   function start_event(){
      event.stopPropagation();
      console.log("나는 자식이야");  
   }
</script>
-> 
  나는 자식이야

부모 이벤트는 실행되지 않는다.

✍🏻preventDefault()는 브라우저에 재 시작을 막아주는 함수라면 stopPropagation()는 이벤트에 전파를 막아주는 함수이다.