• 회원가입
  • 로그인

[DOM_Event] JS - toggle 이벤트 (= ontoggle 속성) - <details> 요소 (열기/닫기) 시 발생 (IE지원X)

목차
  1. toggle 예제 - 토글 이벤트 (HTML 속성 방식)
  2. toggle 정의
  3. toggle 구문
  4. toggle 예제 - 토글 이벤트 (JS 속성 방식)
  5. toggle 예제 - 토글 이벤트 (JS 메서드 방식)

 

toggle 예제 - 토글 이벤트 (HTML 속성 방식) 

 

<detailsontoggle="homzzang()">

    <summary>홈짱닷컴 Homzzang.com [클릭]</summary>

    <p>홈페이지 제작관리 + 서버관리</p>

    <p>HTML CSS JS JQ PHP SQL BS</p>

</details>


<script>

function homzzang() {

  alert("홈짱닷컴 Homzzang.com 놀러오세요.");

}

</script>

 

결과보기

 

toggle 정의

 

<details> 요소를 열거나 닫을 때 이벤트 발생.

 


 

1.

<details> 요소는 사용자가 요청 시 보거나 숨길 수 있는 추가 세부 정보를 지정함.

 

2.

  • 이벤트확산: X
  • 취소가능: X
  • 이벤트타입: Event
  • 지원태그: <details>
  • DOM버전: Level 3 Events

 

3.

IE 제외한 주요 최신 브라우저 지원.

 

4.

MDN <detail> toggle 이벤트 예제 보기
https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event

 

 

 

toggle 구문

 

HTML 속성 방식

<element ontoggle="myScript">


JS 속성 방식

object.ontoggle = function(){myScript};


JS 메서드 방식

object.addEventListener("toggle", myScript);


※ addEventListener() 메서드는 IE8 이상 지원.

 

toggle 예제 - 토글 이벤트 (JS 속성 방식)

 

<details id="hz">

    <summary>홈짱닷컴 정보</summary>

    <p>Homzzang.com</p>

    <p>코딩/프로그래밍 강의</p>

</details>


<script>

document.getElementById("hz").ontoggle = function() {homzzang()};


function homzzang() {

  alert("홈짱닷컴에 자주 오세요.");

}

</script>


결과보기

 

toggle 예제 - 토글 이벤트 (JS 메서드 방식)

 

<details id="hz">

    <summary>홈짱닷컴 정보</summary>

    <p>Homzzang.com</p>

    <p>코딩/프로그래밍 강의</p>

</details>


<script>

document.getElementById("hz").addEventListener("toggle", homzzang);


function homzzang() {

  alert("홈짱닷컴에 자주 오세요.");

}

</script>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012