Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML details 요소를 열거나 닫을 때 스크립트 실행하기 – ontoggle 이벤트 활용법

사용자가 <details> 요소를 열거나 닫을 때마다 ontoggle 이벤트가 발생합니다. 이 이벤트 속성을 활용하면 상세 정보가 펼쳐지거나 접히는 바로 그 순간에 원하는 자바스크립트 코드를 실행할 수 있습니다. 아래 예제 코드를 직접 실행해 보세요.

ontoggle 이벤트란?

ontoggle은 <details> 요소의 open 상태가 변경될 때마다 트리거되는 이벤트입니다. 사용자가 <summary> 영역을 클릭해 내용을 펼치거나 다시 접을 때마다 지정된 함수가 호출되며, 페이지 로드 시점에 요소가 이미 열려 있는 상태라면 로드 직후에도 한 번 발생합니다.

구현 예제

<!DOCTYPE html>
<html>
   <body>
      <h2>회사 안내</h2>
      <p>2월 23일부터 사무실 출근이 필요합니다.</p>

      <details id="infoBox" ontoggle="display()">
         <summary>추가 정보 보기</summary>
         <p>근무 시간: 오전 9시 ~ 오후 5시 30분</p>
         <p>사무실 위치: 하이데라바드(Hyderabad)</p>
      </details>

      <script>
         function display() {
            alert("근무 시간, 사무실 위치 등의 정보를 확인하세요!");
         }
      </script>
   </body>
</html>

코드 설명

  • <details> 요소에 ontoggle="display()" 속성을 추가해, 토글 이벤트가 발생할 때 display() 함수가 실행되도록 연결했습니다.
  • <summary>는 사용자가 클릭하는 제목 영역으로, 이곳을 클릭할 때마다 상세 내용이 열리고 닫힙니다.
  • ontoggle 속성에서 지정한 함수 이름과 실제 <script> 안에 정의된 함수 이름은 반드시 일치해야 합니다. 이름이 다르면 아무런 오류 메시지 없이 스크립트가 동작하지 않으니 주의하세요.

열림·닫힘 상태 구분하기

ontoggle 이벤트는 요소가 열릴 때와 닫힐 때 모두 발생합니다. 두 상태를 구분하고 싶다면 details 객체의 open 속성 값을 확인하면 됩니다.

<script>
   function display() {
      const box = document.getElementById("infoBox");
      if (box.open) {
         alert("상세 정보가 열렸습니다.");
      } else {
         alert("상세 정보가 닫혔습니다.");
      }
   }
</script>

브라우저 지원

ontoggle 이벤트는 Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 모두 지원됩니다. 다만 구형 Internet Explorer는 <details> 요소 자체를 지원하지 않으므로, 해당 브라우저까지 고려해야 하는 프로젝트라면 별도의 대체 구현이 필요합니다.