Skip to content

Commit 7703566

Browse files
committed
mousemove-mouseover-mouseenter-mouseleave
1 parent acea87c commit 7703566

File tree

1 file changed

+7
-7
lines changed
  • 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave

1 file changed

+7
-7
lines changed

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -106,14 +106,14 @@ Si vous déplacez la souris de `#parent` à `#enfant`, vous voyez deux événeme
106106
[codetabs height=360 src="mouseoverout-child"]
107107
```
108108

109-
As shown, when the pointer moves from `#parent` element to `#child`, two handlers trigger on the parent element: `mouseout` and `mouseover`:
109+
Comme indiqué, lorsque le pointeur passe de l'élément `#parent` à l'élément `#child`, deux gestionnaires se déclenchent sur l'élément parent : `mouseout` et `mouseover`:
110110

111111
```js
112112
parent.onmouseout = function(event) {
113-
/* event.target: parent element */
113+
/* event.target: élément parent */
114114
};
115115
parent.onmouseover = function(event) {
116-
/* event.target: child element (bubbled) */
116+
/* event.target: élément enfant */
117117
};
118118
```
119119

@@ -178,7 +178,7 @@ table.onmouseout = function(event) {
178178
```
179179

180180
```online
181-
Here they are in action. As the mouse travels across the elements of this table, the current one is highlighted:
181+
Les voici en action. Lorsque la souris se déplace sur les éléments de ce tableau, celui qui est survolé est mis en évidence:
182182
183183
[codetabs height=480 src="mouseenter-mouseleave-delegation"]
184184
```
@@ -196,9 +196,9 @@ Voici un exemple de code qui prend en compte toutes les situations possibles :
196196

197197
[js src="mouseenter-mouseleave-delegation-2/script.js"]
198198

199-
Once again, the important features are:
200-
1. It uses event delegation to handle entering/leaving of any `<td>` inside the table. So it relies on `mouseover/out` instead of `mouseenter/leave` that don't bubble and hence allow no delegation.
201-
2. Extra events, such as moving between descendants of `<td>` are filtered out, so that `onEnter/Leave` runs only if the pointer leaves or enters `<td>` as a whole.
199+
Les caractéristiques importantes sont les suivantes:
200+
1. Il utilise la délégation d'événements pour gérer l'entrée/sortie de tout `<td>` à l'intérieur de la table. Il s'appuie donc sur le `mouseover/out` au lieu du `mouseenter/leave` qui ne fait pas de bulles et ne permet donc aucune délégation..
201+
2. Les événements supplémentaires, tels que le déplacement entre les descendants de `<td>` sont filtrés, de sorte que `onEnter/Leave` ne fonctionne que si le pointeur quitte ou entre dans `<td>` dans son ensemble.
202202

203203
```online
204204
Voici l'exemple complet avec tous les détails:

0 commit comments

Comments
 (0)