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/mouseleave_event/index.md | 170 ++++++++++----------- 1 file changed, 82 insertions(+), 88 deletions(-) (limited to 'files/fr/web/api/element/mouseleave_event') diff --git a/files/fr/web/api/element/mouseleave_event/index.md b/files/fr/web/api/element/mouseleave_event/index.md index 2c9ee0d534..53e9bd5cb8 100644 --- a/files/fr/web/api/element/mouseleave_event/index.md +++ b/files/fr/web/api/element/mouseleave_event/index.md @@ -10,77 +10,86 @@ tags: - mouseleave translation_of: Web/API/Element/mouseleave_event --- -

{{APIRef}}

+{{APIRef}} -

L'évènement mouseleave est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.

+L'évènement **`mouseleave`** est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément. - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement + {{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}} +
-

mouseleave et {{event('mouseout')}} se ressemblent mais mouseleave ne remonte pas dans le DOM tandis que mouseout remonte. mouseleave est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que mouseout est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).

+`mouseleave` et {{event('mouseout')}} se ressemblent mais `mouseleave` ne remonte pas dans le DOM tandis que `mouseout` remonte. `mouseleave` est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que `mouseout` est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent). - -

Un évènement mouseleave est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <div> le plus haut dans la hiérarchie.

+![](mouseleave.png) - -

Un seul évènement mouseout est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.

+Un évènement `mouseleave` est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du `
` le plus haut dans la hiérarchie. -

Exemples

+![](mouseout.png) -

Voir la documentation de mouseout pour un exemple sur les différences entre mouseout et mouseleave.

+Un seul évènement `mouseout` est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine. -

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

+## Exemples -

HTML

+Voir la documentation de [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) pour un exemple sur les différences entre `mouseout` et `mouseleave`. -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>Pas encore d'évènement !</li>
- </ul>
-</div>
+Ici, on utilise l'évènement `mouseenter` pour modifier la bordure d'un élément `div` lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements `mouseenter` et `mouseleave`. -

CSS

+### HTML -

On met le div en forme afin de le rendre plus visible.

+```html +
+
    +
  • Pas encore d'évènement !
    • +
+
+``` -
#mouseTarget {
+### CSS
+
+On met le `div` en forme afin de 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("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
 });
 
-mouseTarget.addEventListener('mouseleave', e => {
+mouseTarget.addEventListener('mouseleave', e => {
   mouseTarget.style.border = '1px solid #333';
   leaveEventCount++;
   addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
@@ -98,50 +107,35 @@ function addListItem(text) {
 
   // On ajoute le nouvel élément à la liste
   unorderedList.appendChild(newListItem);
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('DOM3 Events')}}
+} +``` + +### Résultat + +{{EmbedLiveSample('Exemples')}} + +## Spécifications + +| Spécification | État | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}} | {{Spec2('DOM3 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.mouseleave_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.mouseleave_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) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) -- cgit v1.2.3-54-g00ecf