JavaScript/DOM/Event/toggle

Aus SELFHTML-Wiki
JavaScript‎ | DOM‎ | Event
Version vom 4. Juli 2024, 09:19 Uhr von RolfBot (Diskussion | Beiträge) (top: replaced: <source lang="JavaScript"> → <syntaxhighlight lang="JavaScript">, </source> → </syntaxhighlight>)

(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

Der toggle-Event-Handler feuert, wenn der open/closed-Zustand des details-Elements umgeschaltet wird.

bubbles

nein

cancelable

nein

mögliche Auslöser

details

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 ...
  • Das toggle-Event feuert auch, wenn das details-Element per Script geöffnet/geschlossen wird.
  • click feuert, wenn man bei geöffneten details hineinclickt, aber nicht auf die summary – da wird nicht geschlossen.


Weblinks


Abgerufen am 6.09.2025
von "http://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/toggle"