목차
- toggle 예제 - 토글 이벤트 (HTML 속성 방식)
- toggle 정의
- toggle 구문
- toggle 예제 - 토글 이벤트 (JS 속성 방식)
- 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>
결과보기