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

1. toggle 예제 - 토글 이벤트 (HTML 속성 방식)
2. toggle 정의
3. toggle 구문
5. toggle 예제 - 토글 이벤트 (JS 속성 방식)
6. 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>

 

결과보기