From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/element/mouseenter_event/index.md | 179 ++++++++++----------- 1 file changed, 85 insertions(+), 94 deletions(-) (limited to 'files/fr/web/api/element/mouseenter_event') diff --git a/files/fr/web/api/element/mouseenter_event/index.md b/files/fr/web/api/element/mouseenter_event/index.md index ba2623f7c6..8bd5315202 100644 --- a/files/fr/web/api/element/mouseenter_event/index.md +++ b/files/fr/web/api/element/mouseenter_event/index.md @@ -10,84 +10,92 @@ tags: - mouseenter translation_of: Web/API/Element/mouseenter_event --- -
{{APIRef}}
+{{APIRef}} -

L'évènement mouseenter est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.

+L'évènement **`mouseenter`** est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément. - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement + {{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}} +
-

Notes d'utilisation

+## Notes d'utilisation -

Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, mouseenter est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.

+Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, `mouseenter` est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément. +![](mouseenter.png) - -

mouseenter est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.

+`mouseenter` est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte. - -

Un seul évènement mouseover est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.

+![](mouseover.png) -

Avec des hiérarchies profondes, le nombre d'évènements mouseenter envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements mouseover.

+Un seul évènement `mouseover` est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine. -

Avec la combinaison de mouseenter et mouseleave (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.

+Avec des hiérarchies profondes, le nombre d'évènements `mouseenter` envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements `mouseover`. -

Exemples

+Avec la combinaison de `mouseenter` et `mouseleave` (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}. -

La documentation mouseover illustre la différence entre mouseover et mouseenter.

+## Exemples -

Ici, on utilise mouseenter pour modifier la bordure d'un div lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements mouseenter ouor mouseleave event.

+La documentation [`mouseover`](/fr/docs/Web/API/Element/mouseover_event#Exemples) illustre la différence entre `mouseover` et `mouseenter`. -

HTML

+Ici, on utilise `mouseenter` pour modifier la bordure d'un `div` lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements `mouseenter` ouor `mouseleave` event. -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>No events yet!</li>
- </ul>
-</div>
+### HTML -

CSS

+```html +
+ +
+``` -

On met en forme le div pour le rendre plus visible.

+### CSS -
#mouseTarget {
+On met en forme le `div` pour le rendre plus visible.
+
+```css
+#mouseTarget {
   box-sizing: border-box;
   width:15rem;
   border:1px solid #333;
-}
+} +``` -

JavaScript

+### JavaScript -
var enterEventCount = 0;
+```js
+var enterEventCount = 0;
 var leaveEventCount = 0;
 const mouseTarget = document.getElementById('mouseTarget');
 const unorderedList = document.getElementById('unorderedList');
 
-mouseTarget.addEventListener('mouseenter', e => {
+mouseTarget.addEventListener('mouseenter', e => {
   mouseTarget.style.border = '5px dotted orange';
   enterEventCount++;
   addListItem("C'est le " + enterEventCount + "ème mouseenter.");
 });
 
-mouseTarget.addEventListener('mouseleave', e => {
+mouseTarget.addEventListener('mouseleave', e => {
   mouseTarget.style.border = '1px solid #333';
   leaveEventCount++;
   addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
@@ -105,53 +113,36 @@ function addListItem(text) {
 
   // On ajoute l'élément de liste à la liste
   unorderedList.appendChild(newListItem);
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
+} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}} | {{Spec2('DOM3 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.mouseenter_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -

Compatibilité des navigateurs

- -

{{Compat("api.Element.mouseenter_event")}}

- -

Voir aussi

- - + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) -- cgit v1.2.3-54-g00ecf