Document : évènement selectionchange

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

addEventListener("selectionchange", (event) => {})

onselectionchange = (event) => {}

Type d'évènement

Un objet Event générique.

Description

L'évènement selectionchange de l'objet Document est déclenché lorsque :

• Un·e utilisateur·ice ou un script crée ou efface une sélection.
• Le point de départ ou d'arrivée d'une plage sélectionnée se déplace.
• Une plage sélectionnée change complètement.
• Une sélection se réduit à une seule position de curseur.

L'objet évènement lui-même ne contient pas les détails de la sélection mise à jour. Vous pouvez récupérer la sélection actuelle en appelant document.getSelection() dans votre gestionnaire d'évènement.

Cet évènement diffère considérablement de l'évènement selectionchange déclenché sur les contrôles de texte <input> et <textarea> :

• Les sélections dans le document utilisent les positions des nœuds DOM et nécessitent Document.getSelection() pour être inspectées. Les champs de texte maintiennent des sélections indépendantes dans leurs valeurs textuelles internes, en utilisant des décalages de caractères inspectés avec selectionStart, selectionEnd et selectionDirection.
• L'évènement selectionchange au niveau du document est déclenché directement sur le Document et ne se propage pas. L'évènement selectionchange des champs de texte est déclenché sur l'élément input/textarea et se propage dans l'arbre DOM.

Consultez l'évènement selectionchange de HTMLInputElement et l'évènement selectionchange de HTMLTextAreaElement pour plus de détails sur les évènements de saisie de texte.

Exemples

Exemple simple

// Version avec addEventListener
document.addEventListener("selectionchange", () => {
  console.log(document.getSelection());
});

// Version avec onselectionchange
document.onselectionchange = () => {
  console.log(document.getSelection());
};

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'évènement selectstart
• La méthode Document.getSelection()
• L'interface Selection