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 repräsentiert entweder einen Bereich ausgewählten Inhalts über DOM-Knoten oder eine eingeklappte Cursorposition.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergeleitet.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("selectionchange", (event) => {})
onselectionchange = (event) => {}
Ereignistyp
Ein generisches Event.
Beschreibung
Das Document-Objekt selectionchange-Ereignis wird ausgelöst, wenn:
- Ein Benutzer oder Skript eine Auswahl erstellt oder löscht.
- Der Anfangs- oder Endpunkt eines ausgewählten Bereichs verschoben wird.
- Ein ausgewählter Bereich vollständig geändert wird.
- Eine Auswahl auf eine einzige Cursorposition zusammenbricht.
Das Ereignisobjekt selbst enthält keine aktualisierten Auswahldetails. Sie können die aktuelle Auswahl abrufen, indem Sie document.getSelection() innerhalb Ihres Ereignislisteners aufrufen.
Hinweis:
Wenn Sie die Auswahl programmgesteuert ändern, beispielsweise durch Aufruf von Selection.collapse(), wird die Auswahl sofort aktualisiert, aber das selectionchange-Ereignis wird als Aufgabe in die Warteschlange eingereiht. Seine Listener werden später ausgeführt, nachdem das aktuelle Skript die Ausführung beendet hat. Dies steht in Kontrast zu Ereignissen wie focus und click, deren Listener synchron ausgeführt werden, wenn sie durch focus() und click() ausgelöst werden.
Dieses Ereignis unterscheidet sich deutlich vom selectionchange-Ereignis, das bei <input> und <textarea> Textsteuerungen ausgelöst wird:
- Dokumentauswahlen verwenden DOM-Knotenpositionen und erfordern zur Überprüfung
Document.getSelection(). Texteingaben behalten unabhängige Auswahlen innerhalb ihrer internen Textwerte bei und verwenden Zeichenoffsets, die überselectionStart,selectionEndundselectionDirectionüberprüft werden. - Das dokumentenweite
selectionchange-Ereignis wird direkt amDocumentausgelöst und wird nicht weitergeleitet. Dasselectionchange-Ereignis bei Texteingaben wird am Eingabe-/Textarea-Element ausgelöst und wird im DOM-Baum nach oben weitergeleitet.
Siehe das selectionchange-Ereignis von HTMLInputElement und das selectionchange-Ereignis von HTMLTextAreaElement für weitere Details zu den Texteingabe-Ereignissen.
Beispiele
Grundlegende Nutzung
// 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 |