JavaScript/DOM/Event/toggle

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Event
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[Bearbeiten]