HTML returnValue 이벤트 속성 – 개념, 문법, 예제까지 한 번에 정리

HTML의 returnValue 이벤트 속성은 현재 발생한 이벤트가 취소되었는지 여부를 확인(반환)하고, 필요에 따라 값을 직접 설정(수정)할 수 있는 속성입니다. 주로 이벤트의 기본 동작을 제어하거나 이벤트 상태를 점검할 때 활용됩니다.

문법(Syntax)

returnValue 속성의 기본 문법은 다음과 같습니다.

1. returnValue 값 가져오기

event.returnValue

2. returnValue 값 설정하기

event.returnValue = "true | false"

값이 true이면 이벤트가 취소되지 않은 상태를 의미하며, false로 설정하면 해당 이벤트의 기본 동작이 취소됩니다.

그럼 HTML returnValue 이벤트 속성이 실제로 어떻게 동작하는지 예제를 통해 살펴보겠습니다.

예제(Example)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    input {
        width: 200px;
        height: 2rem;
    }
    .msg {
        font-size: 1.5rem;
    }
</style>
</head>
<body>
<h1>HTML returnValue Event Property Demo</h1>
<input type="text" placeholder="Enter your name" onfocus="show(event)">
<p class="msg"></p>
<script>
    function show(event) {
        document.querySelector('.msg').innerHTML = 'Is onfocus event is active on above input field? ' + event.returnValue;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML returnValue 이벤트 속성 – 개념, 문법, 예제까지 한 번에 정리

이제 입력 필드를 클릭하여 포커스(focus)를 주면, onfocus 이벤트가 발생하면서 returnValue 이벤트 속성의 현재 값이 화면에 표시됩니다.

HTML returnValue 이벤트 속성 – 개념, 문법, 예제까지 한 번에 정리

정리

returnValue 이벤트 속성은 이벤트 객체(event object)에서 제공하는 속성으로, 이벤트가 취소 가능한 상태인지 그리고 실제로 취소되었는지를 true/false 값으로 판단할 수 있게 해줍니다. 참고로 현대 브라우저에서는 유사한 기능을 하는 event.defaultPrevented나 preventDefault() 메서드 사용이 권장되지만, returnValue는 여전히 이벤트 기본 동작 제어의 기본 개념을 이해하는 데 중요한 속성입니다.