Comment utiliser l’événement Angular Mouseenter

L’événement mouseenter nous permet de déclencher un comportement lorsque l’utilisateur passe la souris sur un élément. En savoir plus à ce sujet et sur d’autres événements de souris.

Angular est un framework qui nous permet de créer des interfaces Web interactives pour les utilisateurs. Il nous fournit des moyens de gérer les interactions des utilisateurs avec les périphériques d’entrée sur le navigateur de manière propre.

Une chose courante que nous devons faire lorsque nous créons des applications Web frontales est la gestion des événements de souris. Dans cet article, nous verrons comment gérer les événements d’interaction de la souris dans une application angulaire.

Événements d’entrée de la souris dans le navigateur natif

L’événement mouseenter est déclenché lorsque nous survolons un élément. Ce comportement est identique à celui de l’événement mouseover.

Cependant, l’événement mouseover se propage à tous les éléments ancêtres et envoie également l’événement à tous les descendants lorsque le pointeur est déplacé d’un descendant vers son propre espace. L’événement mouseenter remonte mais n’envoie pas l’événement aux éléments descendants.

En JavaScript simple, nous pouvons écouter l’événement natif mouseenter en appelant le addEventListener méthode sur l’élément qui déclenche l’événement.

Par exemple, nous écrivons :

<div>
  <section>foo</section>
  <section id="mouseTarget">bar</section>
  <section>baz</section>
</div>

pour ajouter quelques éléments sur notre code HTML.

Puis nous écrivons :

const mouseTarget = document.querySelector("#mouseTarget");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.color = "green";
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.color = "black";
});

Nous sélectionnons l’élément que nous voulons écouter pour la sourisenter avec document.querySelector.

Puis nous appelons mouseTarget.addEventListener avec mouseenter et la fonction de gestionnaire d’événements mouseenter pour écouter l’événement mouseenter sur mouseTarget.

De même, nous faisons la même chose avec l’événement mouseleave. L’événement mouseleave est déclenché lorsque le pointeur de la souris quitte l’élément.

Dans la fonction de gestionnaire d’événement mouseenter, nous définissons le mouseTargetest la couleur de green. Et lorsque notre souris quitte l’élément, nous définissons mouseTargetest la couleur de black.

Par conséquent, lorsque nous déplaçons le pointeur de notre souris sur « bar », nous voyons qu’il devient vert. Et lorsque nous éloignons le pointeur de notre souris de « bar », il redevient noir.

Gestion des événements Mouseenter dans les composants angulaires

Angular est livré avec une syntaxe intégrée pour gérer les événements mouseenter. L’événement mouseenter est déclenché sur un élément lorsque notre souris entre dans l’élément.

La syntaxe de modèle d’Angular a le (mouseenter) directive pour nous permettre d’exécuter du code lorsque l’événement mouseenter est déclenché sur un élément. Par exemple, nous écrivons :

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  onMouseEnter() {
    console.log("mouse enter");
  }
}

pour ajouter le onMouseEnter méthode dans le AppComponent classe de composant qui enregistre un message.

Puis nous écrivons :

app.component.html

<div>
  <section>foo</section>
  <section (mouseenter)="onMouseEnter()">bar</section>
  <section>baz</section>
</div>

pour ajouter des éléments dans le modèle.

Dans le deuxième élément de section, nous ajoutons le (mouseenter) directive de onMouseEnter(). Ainsi, lorsque le pointeur de la souris entre dans le deuxième élément de la section, le onMouseEnter méthode est appelée et mouseenter est connecté.

Nous pouvons utiliser la même logique pour exécuter du code lorsque notre souris entre dans un élément de liste.

Par exemple, nous écrivons :

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(name: string) {
    console.log("mouse enter", name);
  }

  onMouseOut(name: string) {
    console.log("mouse out", name);
  }
}

pour ajouter le names tableau de chaînes dans AppComponent. Puis nous ajoutons le onMouseEnter et onMouseOut méthodes qui enregistrent le name évaluer.

Ensuite, nous écrivons :

app.component.html

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter(name)"
      (mouseleave)="onMouseOut(name)"
    >
      {{ name }}
    </li>
  </ul>
</div>

rendre un ul élément avec li éléments à l’intérieur de celui-ci.

Nous rendons les entrées dans le names tableau avec le *ngFor directif. Et nous fixons (mouseenter) sur chaque li élément rendu à onMouseEnter(name) appeler onMouseEnter avec
name lorsque notre pointeur de souris entre dans le li élément.

De même, nous posons (mouseleave) à onMouseOut(name) appeler onMouseOut avec name appeler onMouseOut avec name lorsque notre pointeur de souris quitte le li élément.

Par conséquent, lorsque le pointeur de notre souris passe sur « bob », nous voyons mouse enter bob connecté.

Et lorsque le pointeur de notre souris quitte « bob », nous voyons mouse out bob connecté.

Application de styles d’effet de survol avec Angular

Nous pouvons appliquer des styles lorsque nous déplaçons le pointeur de la souris sur un élément ou lorsqu’il quitte l’élément.

Par exemple, nous écrivons :

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  names: string[] = ["jane", "mary", "bob", "john", "alex"];

  onMouseEnter(hoverName: HTMLElement) {
    hoverName.style.color = "green";
  }

  onMouseOut(hoverName: HTMLElement) {
    hoverName.style.color = "black";
  }
}

pour changer le onMouseEnter et onMouseOut méthodes pour prendre un paramètre de type HTMLElement.

En eux, nous fixons le color propriété CSS de la hoverName élément HTML à une couleur spécifique.

Ensuite, nous écrivons :

<div>
  <ul>
    <li
      *ngFor="let name of names"
      #hoverName
      (mouseenter)="onMouseEnter(hoverName)"
      (mouseleave)="onMouseOut(hoverName)"
    >
      {{ name }}
    </li>
  </ul>
</div>

pour ajouter le #hoverName variable de référence de modèle à chaque li élément dans le modèle.

Les variables de référence de modèle sont affectées aux éléments afin que nous puissions les référencer ailleurs dans le modèle de composant ou dans le code de la classe de composant.

Angular peut distinguer l’élément référencé même si nous attribuons le même nom de variable à chaque élément.

Puis nous fixons (mouseenter) à onMouseEnter(hoverName) appeler onMouseEnter avec hoverName lorsque nous déplaçons le pointeur de notre souris sur un li élément. De même, nous posons (mouseleave) à onMouseOut(hoverName) appeler onMouseOut avec le hoverName variable de référence de modèle lorsque le pointeur de la souris quitte la li élément.

Dans onMouseEnternous fixons hoverName.style.color à green pour rendre le texte vert lorsque nous déplaçons le pointeur de la souris sur le li élément avec la variable de modèle. Et en onMouseOutnous fixons hoverName.style.color à black pour rendre le texte noir lorsque nous déplaçons le pointeur de notre souris sur l’élément li avec la variable de modèle.

Du coup, on devrait voir le nom que l’on survole sur la page devenir vert. Et lorsque notre souris quitte le nom, le nom redevient noir.

Nous pouvons réécrire le code de l’exemple précédent sans utiliser de variables de modèle.

Nous gardons le code dans app.component.ts le même. Ensuite, nous changeons de code dans app.component.html à:

<div>
  <ul>
    <li
      *ngFor="let name of names"
      (mouseenter)="onMouseEnter($event.target)"
      (mouseleave)="onMouseOut($event.target)"
    >
      {{name}}
    </li>
  </ul>
</div>

Nous avons supprimé le #hoverName variable de modèle.

Au lieu de cela, nous passons l’élément comme argument de onMouseEnter et onMouseOut méthodes en utilisant $event.target Au lieu.

$event.target est l’élément qui a déclenché l’événement. Et $event est l’objet événement de l’événement qui a été déclenché. L’objet d’événement est un objet d’événement de navigateur natif.

Comme nous pouvons le voir, la logique des événements du gestionnaire mouseenter et mouseleave est la même que celle de l’exemple JavaScript simple. La seule différence est que Angular nous fournit une syntaxe spéciale que nous pouvons ajouter à notre code HTML pour faire la même chose que addEventListener.

Et nos méthodes de gestionnaire d’événements se trouvent dans le code de la classe de composants au lieu de les placer n’importe où, comme nous le souhaitons, dans le code JavaScript brut.

Conclusion

Une chose que nous devons souvent faire lorsque nous créons des applications Web frontales est de gérer les événements de souris. Nous pouvons gérer facilement les événements mouseenter et mouseleave avec Angular.

La logique est la même que lorsque nous utilisons du JavaScript simple pour gérer ces événements. Angular nous fournit simplement un moyen structuré de gérer les événements de souris et de périphérique d’entrée avec des variables de modèle et des directives.

L’événement mouseenter est déclenché lorsque nous déplaçons le pointeur de notre souris sur un élément. Et l’événement mouseleave est déclenché lorsque nous éloignons le pointeur de notre souris d’un élément.