Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Dokument: selectionchange-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2017 browserübergreifend verfügbar.
Der Browser löst das selectionchange-Ereignis der Selection API aus, wenn sich die aktuelle Selection eines Document ändert. Eine Dokumentauswahl stellt entweder einen Bereich ausgewählter Inhalte über mehrere DOM-Knoten hinweg oder eine zusammengefallene Cursorposition dar.
Dieses Ereignis kann nicht abgebrochen werden und breitet sich nicht aus.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("selectionchange", (event) => {})
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onselectionchange = (event) => {}
Ereignistyp
Ein generisches Event.
Beschreibung
Das selectionchange-Ereignis des Document-Objekts wird ausgelöst, wenn:
- Ein Benutzer oder ein Skript eine Auswahl erstellt oder aufhebt.
- Sich der Anfangs- oder Endpunkt eines ausgewählten Bereichs verschiebt.
- Sich ein ausgewählter Bereich vollständig ändert.
- Eine Auswahl auf eine einzelne Cursorposition zusammenfällt.
Das Ereignisobjekt selbst enthält keine Angaben zur aktualisierten Auswahl. Sie können die aktuelle Auswahl abrufen, indem Sie in Ihrem Event-Listener document.getSelection() aufrufen.
Hinweis:
Wenn Sie die Auswahl programmgesteuert ändern, beispielsweise durch Aufrufen von Selection.collapse(), wird die Auswahl sofort aktualisiert. Das selectionchange-Ereignis wird jedoch als Task in eine Warteschlange gestellt. Seine Listener werden erst später ausgeführt, nachdem das aktuelle Skript beendet ist. Dies unterscheidet sich von Ereignissen wie focus und click, deren Listener synchron ausgeführt werden, wenn sie durch focus() beziehungsweise click() ausgelöst werden.
Dieses Ereignis unterscheidet sich deutlich vom selectionchange-Ereignis, das bei den Texteingabefeldern <input> und <textarea> ausgelöst wird:
- Dokumentauswahlen verwenden Positionen von DOM-Knoten und müssen mit
Document.getSelection()untersucht werden. Texteingabefelder verwalten unabhängige Auswahlen innerhalb ihrer internen Textwerte. Deren Zeichenpositionen lassen sich überselectionStart,selectionEndundselectionDirectionuntersuchen. - Das
selectionchange-Ereignis auf Dokumentebene wird direkt auf demDocumentausgelöst und breitet sich nicht aus. Dasselectionchange-Ereignis eines Texteingabefelds wird auf dem input- oder textarea-Element ausgelöst und breitet sich im DOM-Baum nach oben aus.
Weitere Informationen zu den Ereignissen von Texteingabefeldern finden Sie beim selectionchange-Ereignis von HTMLInputElement und beim selectionchange-Ereignis von HTMLTextAreaElement.
Beispiele
>Grundlegende Verwendung
// addEventListener version
document.addEventListener("selectionchange", () => {
console.log(document.getSelection());
});
// onselectionchange version (but note that this replaces other event listeners
// added using onselectionchange, if any)
document.onselectionchange = () => {
console.log(document.getSelection());
};
Spezifikationen
| Spezifikation |
|---|
| Selection API> # selectionchange-event> |
| Selection API> # dom-globaleventhandlers-onselectionchange> |