HTML의 defaultPrevented 이벤트 속성은 해당 이벤트에서 preventDefault() 메서드가 호출되었는지 여부를 확인할 때 사용합니다. 이 속성은 불리언(Boolean) 값을 반환하며, preventDefault() 메서드가 호출된 경우 true, 호출되지 않은 경우 false를 리턴합니다.
예를 들어, 링크 클릭 시 기본 동작(페이지 이동)을 막았다면 defaultPrevented 값은 true가 되어, 개발자가 이후 로직에서 기본 동작이 차단되었는지 쉽게 판단할 수 있습니다.
문법(Syntax)
event.defaultPrevented
사용 예제
아래 예제는 링크 요소에 클릭 이벤트를 등록하고, preventDefault() 호출 여부를 알림 창(alert)으로 확인하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<body>
<h2>데모 제목</h2>
<a id="myid" href="https://example.com/">데모 (클릭해 보세요)</a>
<script>
document.getElementById("myid").addEventListener("click", function(event){
event.preventDefault()
alert("preventDefault()가 호출되었습니까?: " + event.defaultPrevented);
});
</script>
</body>
</html>실행 결과
위 코드를 실행한 후 링크를 클릭하면, 페이지가 이동하지 않고 다음과 같은 내용이 담긴 알림 창이 화면에 표시됩니다.
링크를 클릭하면 preventDefault() 메서드가 먼저 실행되어 링크의 기본 동작인 페이지 이동이 차단됩니다. 그 후 알림 창에는 아래와 같이 defaultPrevented 속성의 값이 출력됩니다.
정리
defaultPrevented 속성은 이벤트의 기본 동작이 이미 차단되었는지 확인하는 데 유용한 도구입니다. 특히 여러 이벤트 핸들러가 연결된 복잡한 웹 애플리케이션에서, 다른 핸들러가 preventDefault()를 호출했는지 검사하여 중복 처리나 충돌을 방지하는 데 활용할 수 있습니다.