Event 인터페이스의 preventDefault 메소드란?

 Event 인터페이스의 메소드 중에 preventDefault가 있다. 이에 대해 알아보자.

 

 

 먼저, preventDefault는 말 그대로 이벤트의 기본 동작(default)를 막는다(prevent). 대표적인 예시 중 하나가 a 태그이다. a 태그는 href 속성에 웹 페이지, 이미지, 동영상 등의 주소를 넣을 수 있고, 이 태그를 클릭하면 해당 주소로 이동하는 기능을 갖는다. 이 때, 이 클릭에 대한 이벤트가 preventDefault 메소드를 실행토록 하면, 해당 주소로 이동하는 기본 동작을 막을 수 있다.

 

 

 

 MDN의 정의에 따르면 preventDefault 메소드는

 

"The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be."

 

라고 되어 있다. 해석을 하면 "Event 인터페이스의 preventDefault 메소드는 해당 이벤트를 명시적으로 다루지 않으면 유저 에이전트의 기본 동작이 평소대로 동작하지 않도록 한다."로 될 것 같다. 말이 너무 어렵다. 특히 유저 에이전트의 기본 동작이 정확히 무엇을 말하는지 애매모호하다.

 

 

 

 위에서 말하는 유저 에이전트는 브라우저를 말하는 것으로 보인다. 여러 종류의 브라우저(safari, chrome, edge 등)가 존재하므로, 각각의 브라우저가 제공하는 태그 요소들의 기본적으로 정의된 이벤트 동작을 말하는 것으로 이해된다. 체크박스의 클릭 이벤트는 기본적으로 체크박스를 체크 또는 해제하는 것인 것처럼.

 

 

 예를 들면 아래 react 코드를 보자. form 태그 내부에서의 button 태그의 기본적인 클릭 이벤트는 제출(submit)로서, 입력 폼에 대한 내용을 전송하고 페이지를 reload하는 효과를 가져온다. 이 때의 이벤트 발생을 막기 위해 preventDefault 메소드를 실행할 수 있다.

 

function enroll() {
    return (
          <form>
            <button
              onClick={(e) => {
                e.preventDefault();
                // ...
              }}
            > 
              Click !
            </button>
          </form>
    )
}

 

 주의할 점은 취소 불가능한 이벤트가 존재하는데, preventDefault()를 호출해도 아무 효과가 발생하지 않는 다는 것이다(막지 못함). Event.cancelable 읽기 전용 속성에 접근하면 이벤트 취소 가능 여부를 boolean 값으로 알아낼 수 있다. 취소가 가능하면 true 값을 갖는다.

 

출처

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

Event.preventDefault() - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/Event/cancelable

Event.cancelable - Web API | MDN

https://ifuwanna.tistory.com/289

[Javascript] event preventDefault() stopPropagation() 차이점