JAVASCRIPT PreventDefault()

preventDefault()는 JavaScript에서 이벤트의 기본 동작을 취소하는 메소드이다. 이 메소드를 호출하면 이벤트의 기본 동작이 실행되지 않고, 대신에 사용자가 지정한 동작이 실행된다.

 

HTML요소들은 기본적으로 여러 가지 이벤트를 가지고 있는데 예를들어, <a> 태그의 경우 클릭 이벤트가 발생하면 해당 링크로 이동하는 기본 동작이 발생하는데 이때, preventDefault()를 사용하면 링크로의 이동이 취소 된다.

preventDefault()메소드는 주로 이벤트 핸들러 함수 내에서 사용된다. 이벤트 핸들러함수는 이벤트가 발생했을 때 실행되는 함수이다. 이벤트 핸들러 함수내에서 preventDefault()를 호출하면 이벤트의 기본 동작이 막히게 된다.

 

아래 예시를 보자면👉

<a href = "https://www.example.com" id = "mylink">링크</a>

<script>
	//이벤트 핸들러 함수
    function handleClick(event){
    	event.preventDefault(); //기본 동작 취소
        console.log("링크 클릭 이벤트 발생!");
    }
    
    //이벤트 핸들러 함수를 등록
    var link = document.getElementById("myLink");
    link.addEventListener("click", handleClick);
</script>

위의 예시에서는 <a>태그를 클릭하면 "링크 클릭 이벤트 발생!"이라는 메세지가 콘솔에 출력되는 동시에 preventDefault()메소드가 호출되어 링크로의 이동이 막히게 된다.

preventDefault()는 특정 이벤트의 기본 동작을 취소하는 데에 유용하게 사용될 수 있다. 이를 통해 원하는 동작을 정의하거나 추가적인 처리를 할 수 있다.