JavaScript/DOM/Event/toggle

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

• WHATWG: toggle
• MDN:toggle Event
• CodePen: details element – toggle and click events von Gunnar Bittersmann