Gestion des événements en TypeScript

Articles

Cet article explique la gestion des événements en TypeScript.

Vous pouvez apprendre les méthodes de gestion des événements et les événements personnalisés grâce à des exemples de code.

YouTube Video

Gestion des événements en TypeScript

La gestion des événements en TypeScript se fait de la même manière qu’en JavaScript. Cependant, TypeScript améliore la sécurité de typage, ce qui permet de gérer les événements en toute sécurité en utilisant les bons types d’événements. Les bases de la gestion des événements consistent à ajouter des écouteurs d’événements aux éléments du DOM et à exécuter des actions en réponse aux opérations de l’utilisateur.

Ajouter des écouteurs d’événements

Les écouteurs d’événements sont ajoutés aux éléments du DOM à l’aide de la méthode addEventListener. Par exemple, pour gérer un événement de clic, procédez ainsi :.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}

Dans ce code, addEventListener est utilisé pour enregistrer un gestionnaire pour l'événement de clic sur l'élément DOM spécifié.

Les types d’événements en TypeScript

En TypeScript, l’objet event reçu dans l’écouteur d’événements se voit attribuer automatiquement le type approprié. L’objet event possède des propriétés différentes selon le type d’événement, mais son type de base est Event.

En utilisant le type approprié pour chaque événement, vous pouvez bénéficier de la sécurité de type de TypeScript dans votre développement.

Principaux types d’événements

Event Event est le type de base pour les événements courants. Utilisé pour des actions telles que la soumission de formulaires ou l’achèvement du chargement de la page.

1const form = document.getElementById('myForm');
2if (form) {
3    form.addEventListener('submit', (event: Event) => {
4        event.preventDefault();  // Prevent the default form submission
5        console.log('Form was submitted');
6    });
7}

Ce code détecte l'événement de soumission du formulaire, empêche l'action de soumission par défaut et affiche un message dans la console à la place.

MouseEvent

MouseEvent est un type d'événement lié aux actions de la souris telles que les clics et les déplacements de la souris. Vous pouvez obtenir des informations sur les coordonnées de la souris et sur le bouton cliqué.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event: MouseEvent) => {
4        // Log the click position
5        console.log(`Click position: X=${event.clientX}, Y=${event.clientY}`);
6    });
7}

Ce code récupère les coordonnées de la souris lorsque le bouton est cliqué et les affiche dans la console.

KeyboardEvent KeyboardEvent est un type d'événement lié à la saisie au clavier. Vous pouvez accéder à la touche enfoncée et à l’état des touches de modification (Shift, Alt, Ctrl, etc.).

1document.addEventListener('keydown', (event: KeyboardEvent) => {
2    // Log the pressed key
3    console.log(`Key pressed: ${event.key}`);
4    if (event.ctrlKey) {
5        // Log that the Ctrl key was pressed
6        console.log('Ctrl key was pressed');
7    }
8});

Ce code affiche le nom de la touche appuyée et, si la touche Ctrl est maintenue enfoncée, affiche également cette information dans la console.

InputEvent InputEvent est un type d'événement lié aux changements dans les champs de saisie. Il est utilisé lorsque la valeur d’un champ texte ou d’une zone de texte a changé.

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: InputEvent) => {
4        // Log the entered value
5        console.log(`Entered value: ${input.value}`);
6    });
7}

Ce code affiche le contenu du champ de saisie dans la console chaque fois que sa valeur change.

FocusEvent FocusEvent est un type d'événement qui se produit lorsqu'un élément reçoit ou perd le focus.

 1const input = document.getElementById('myInput');
 2if (input) {
 3    input.addEventListener('focus', (event: FocusEvent) => {
 4        // Log when the input gains focus
 5        console.log('Focused');
 6    });
 7
 8    input.addEventListener('blur', (event: FocusEvent) => {
 9        // Log when the input loses focus
10        console.log('Blurred');
11    });
12}

Ce code affiche « Focus » dans la console lorsque le champ de saisie est actif, et « Perte de focus » lorsqu'il le perd.

Gérer les événements personnalisés avec une assertion de type

Pour les événements personnalisés ou lorsque l’inférence de type TypeScript ne fonctionne pas, vous pouvez définir explicitement le type en utilisant des assertions de type.

Par exemple, pour gérer un événement sur un champ de saisie spécifique (HTMLInputElement), spécifiez le type comme suit :.

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: Event) => {
4        const target = event.target as HTMLInputElement;
5        // Log the entered value
6        console.log(`Entered value: ${target.value}`);
7    });
8}

Ce code utilise une assertion de type pour traiter la cible de l'événement comme un HTMLInputElement et affiche sa valeur dans la console.

Supprimer des écouteurs d’événements

Vous pouvez supprimer des écouteurs d’événements avec removeEventListener. Pour cela, il faut transmettre la même fonction de gestion d’événement que celle ajoutée initialement.

 1const button = document.getElementById('myButton');
 2
 3const handleClick = (event: MouseEvent) => {
 4    // Log when the button is clicked
 5    console.log('Button was clicked');
 6};
 7
 8if (button) {
 9    button.addEventListener('click', handleClick);
10
11    // Remove the event listener later
12    button.removeEventListener('click', handleClick);
13}

Ce code ajoute un écouteur d'événement click au bouton, puis le supprime en spécifiant le même gestionnaire.

Créer des événements personnalisés

En TypeScript, en plus des événements standards, il est également possible de créer et de déclencher des événements personnalisés. Utilisez la classe CustomEvent pour créer un événement personnalisé et le déclencher via la méthode dispatchEvent.

 1const customEvent = new CustomEvent('myCustomEvent', { detail: { name: 'TypeScript' } });
 2const div = document.getElementById('myDiv');
 3
 4if (div) {
 5    div.addEventListener('myCustomEvent', (event: CustomEvent) => {
 6        // Log when the custom event is fired
 7        console.log(`Custom event was triggered: ${event.detail.name}`);
 8    });
 9
10    div.dispatchEvent(customEvent);  // Dispatch the custom event
11}

Ce code crée un événement personnalisé à l'aide de CustomEvent, l'envoie à l'élément et affiche ses détails dans la console.

Contrôler la propagation des événements

Lorsqu’un événement se produit, il est, par défaut, propagé (bulle) vers les éléments parents. Pour empêcher cela, utilisez event.stopPropagation(). Vous pouvez également utiliser preventDefault() pour empêcher le comportement par défaut du navigateur.

 1const button = document.getElementById('myButton');
 2if (button) {
 3    button.addEventListener('click', (event: MouseEvent) => {
 4        event.preventDefault();  // Prevent the default action
 5        event.stopPropagation();  // Stop the event propagation
 6
 7        // Log that event handling has been customized
 8        console.log('Custom event handling');
 9    });
10}

Ce code désactive l'action par défaut lorsque le bouton est cliqué, stoppe la propagation de l'événement et exécute un traitement personnalisé.

Résumé

La gestion des événements en TypeScript est fondamentalement la même qu’en JavaScript, mais grâce à une bonne définition des types, vous pouvez manipuler les objets événements et les éléments du DOM de manière sûre et fiable. En ajoutant et en supprimant des écouteurs d’événements, en appliquant des types d’événements et en utilisant des assertions de type, vous pouvez obtenir une gestion des événements plus claire et moins sujette aux erreurs.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Shadow DOM dans TypeScript Récupération/XMLHttpRequest en TypeScript