web api event
Document: selectionchange event
The browser fires the selectionchange event of the Selection API when the current Selection of a Document changes. A document selection represents either a range of selected content across DOM nodes or a collapsed caret position.
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("selectionchange", (event) => {})
onselectionchange = (event) => {}
Event type
A generic Event.
Description
The Document object selectionchange event is fired when:
- A user or script creates or clears a selection.
- The start or end boundary point of a selected range moves.
- A selected range changes completely.
- A selection collapses to a single caret position.
The event object itself does not contain the updated selection details. You can retrieve the current selection by calling document.getSelection() within your event listener.
This event differs significantly from the selectionchange event fired on <input> and <textarea> text controls:
- Document selections use DOM node positions and require
getSelection()for inspection. Text inputs maintain independent selections within their internal text values, using character offsets inspected viaselectionStart,selectionEnd, andselectionDirection. - The document-level
selectionchangeevent fires directly on theDocumentand does not bubble. The text inputselectionchangeevent fires on the input/textarea element and bubbles up the DOM tree.
See the selectionchange event of HTMLInputElement and the selectionchange event of HTMLTextAreaElement for more details of the text input events.
Examples
Basic usage
// addEventListener version
document.addEventListener("selectionchange", () => {
console.log(document.getSelection());
});
// onselectionchange version
document.onselectionchange = () => {
console.log(document.getSelection());
};