JavaScript/DOM/Event/toggle
Aus SELFHTML-Wiki
JavaScript | DOM | Event
Der toggle-Event-Handler feuert, wenn der open/closed-Zustand des details-Elements umgeschaltet wird.
bubbles |
nein |
---|---|
cancelable |
nein |
mögliche Auslöser | |
Event-Objekt |
Event |
Beispiel
ansehen ...
const detailsElement = document.querySelector('details'); detailsElement.addEventListener('click', logEvent); detailsElement.addEventListener('toggle', logEvent); function logEvent(event) { console.log(`🔥 ${event.type}`); } const buttonElement = document.querySelector('button'); buttonElement.addEventListener('click', event => { detailsElement.open = !detailsElement.open; }); </script>
Das JavaScript hängt mit addEventListener einen click
-Event-Handler an den Button. Durch einen Klick auf den Button wird daraufhin in das der Zeitpunkt der letzten Änderung am Dokument in den Absatz mit der id="Absatz" geschrieben.
Beachten Sie: Das toggle-Event scheint mit dem click-Event identisch zu sein, aber ...
Events (Übersicht)
- Animations-Events
- Datenabruf-Events
- Drag & Drop-Events
- Formular-Events
- Maus, Touch und Pointer-Events
- Medien-Events
- Print-Events
- Tastatur-Events
- Window-Events
- Zwischenablage-Events
Weblinks
- WHATWG: toggle
- MDN:toggle Event
- CodePen: details element – toggle and click events von Gunnar Bittersmann