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 die aktuelle Selection eines Document geändert wird. Eine Dokumentauswahl stellt entweder einen Bereich ausgewählten Inhalts über DOM-Knoten hinweg oder eine eingeklappte Cursorposition dar.
Dieses Ereignis ist nicht abbrechbar und wird nicht nach oben weitergegeben.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("selectionchange", (event) => {})
onselectionchange = (event) => {}
Ereignistyp
Ein generisches Event.
Beschreibung
Das selectionchange-Ereignis des Document-Objekts wird ausgelöst, wenn:
- Ein Benutzer oder Skript eine Auswahl erstellt oder löscht.
- Der Start- oder Endpunkt eines ausgewählten Bereichs verschoben wird.
- Ein ausgewählter Bereich vollständig geändert wird.
- Eine Auswahl auf eine einzelne Cursorposition reduziert wird.
Das Ereignisobjekt selbst enthält keine aktualisierten Auswahldetails. Sie können die aktuelle Auswahl abrufen, indem Sie document.getSelection() innerhalb Ihres Ereignis-Listeners aufrufen.
Dieses Ereignis unterscheidet sich maßgeblich vom selectionchange-Ereignis, das bei <input> und <textarea>-Textelementen ausgelöst wird:
- Dokumentauswahlen verwenden DOM-Knotenpositionen und erfordern
Document.getSelection()zur Inspektion. Texteingaben haben unabhängige Auswahlen innerhalb ihrer internen Textwerte, die über Zeichenoffsets inspiziert werden, die überselectionStart,selectionEndundselectionDirectionzugänglich sind. - Das dokumentenbezogene
selectionchange-Ereignis wird direkt auf demDocumentausgelöst und wird nicht nach oben weitergegeben. Das Texteingabefeldselectionchange-Ereignis wird auf dem Input/Textarea-Element ausgelöst und wird im DOM-Baum nach oben weitergereicht.
Sehen Sie sich das selectionchange-Ereignis von HTMLInputElement und das selectionchange-Ereignis von HTMLTextAreaElement an, um weitere Details zu den Texteingabe-Ereignissen zu erhalten.
Beispiele
Grundlegende Verwendung
// addEventListener version
document.addEventListener("selectionchange", () => {
console.log(document.getSelection());
});
// onselectionchange version
document.onselectionchange = () => {
console.log(document.getSelection());
};
Spezifikationen
| Spezifikation |
|---|
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |