HTML ontoggle 이벤트 속성 완벽 가이드

HTML의 ontoggle 이벤트 속성은 사용자가 HTML 문서에서 <details> 요소를 열거나 닫을 때 트리거되는 이벤트입니다. 접혀 있던 세부 콘텐츠가 펼쳐지거나 다시 접히는 순간에 지정한 자바스크립트 코드를 실행할 수 있어, 동적인 인터랙션을 구현할 때 매우 유용합니다.

문법(Syntax)

ontoggle 이벤트 속성의 기본 문법은 다음과 같습니다.

<details ontoggle="script">내용</details>

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

예제(Example)

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
</style>
</head>
<body>
<h1>HTML ontoggle Event Attribute Demo</h1>
<details ontoggle="toggleFn()">
<summary>Hi! I'm summary element</summary>
<p>This is a paragraph with some dummy content.</p>
</details>
<script>
    function toggleFn() {
        document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
        document.body.style.color = "#fff";
    }
</script>
</body>
</html>

실행 결과(Output)

HTML ontoggle 이벤트 속성 완벽 가이드 – 문법부터 예제까지

페이지가 처음 로드되면 주황색 계열의 그라디언트 배경에 검은 글씨로 화면이 표시됩니다. 이제 <summary> 영역을 클릭하여 <details> 요소를 펼쳐 보세요.

HTML ontoggle 이벤트 속성 완벽 가이드 – 문법부터 예제까지

<details> 요소가 열리는 순간 ontoggle 이벤트가 발생하고, toggleFn() 함수가 실행되면서 배경이 파란색 계열 그라디언트로, 글자 색상은 흰색으로 변경된 것을 확인할 수 있습니다.

알아두면 좋은 점

ontoggle 이벤트는 요소가 열릴 때뿐만 아니라 닫힐 때도 발생합니다. 따라서 열림/닫힘 상태에 따라 서로 다른 동작을 수행하려면 이벤트 핸들러 내에서 details.open 속성값을 확인하면 됩니다. 또한 인라인 속성 대신 addEventListener('toggle', ...) 방식으로도 동일하게 이벤트를 처리할 수 있어, 코드 구조에 맞게 선택하여 사용하시면 됩니다.