fr: tutorial/01/05

apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-a/src/lib/App.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div>
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 
 <style>

apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-b/src/lib/App.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div {onpointermove}>
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 
 <style>

apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/index.md

@@ -1,21 +1,25 @@
 ---
-title: DOM events
+title: Évènements DOM
 ---
 
-As we've briefly seen already, you can listen to any DOM event on an element (such as click or [pointermove](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event)) with an `on<name>` function:
+Comme nous l'avons vu rapidement, vous pouvez écouter n'importe quel évènement sur un élément (comme
+un `click` ou un
+[`pointermove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event)) avec
+une fonction `on<nom>` :
 
 ```svelte
 /// file: App.svelte
 <div +++onpointermove={onpointermove}+++>
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 ```
 
-Like with any other property where the name matches the value, we can use the short form:
+Comme avec toute autre propriété dont le nom correspond à la valeur, nous pouvons utiliser la forme
+raccourcie :
 
 ```svelte
 /// file: App.svelte
 <div +++{onpointermove}+++>
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 ```

apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/+assets/app-b/src/lib/App.svelte

@@ -8,7 +8,7 @@
 		m.y = event.clientY;
 	}}
 >
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 
 <style>

apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/index.md

@@ -1,8 +1,8 @@
 ---
-title: Inline handlers
+title: Gestionnaires inline
 ---
 
-You can also declare event handlers inline:
+Vous pouvez aussi déclarer des gestionnaires d'évènement de manière inline :
 
 ```svelte
 /// file: App.svelte
@@ -21,6 +21,6 @@ You can also declare event handlers inline:
 		m.y = event.clientY;
 	}+++}
 >
-	The pointer is at {m.x} x {m.y}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 ```

apps/svelte.dev/content/tutorial/01-svelte/05-events/03-capturing/index.md

@@ -1,10 +1,15 @@
 ---
-title: Capturing
+title: Capture
 ---
 
-Normally, event handlers run during the [_bubbling_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling) phase. Notice what happens if you type something into the `<input>` in this example — the inner handler runs first, as the event 'bubbles' from the target up to the document, followed by the outer handler.
+En général, les gestionnaires d'évènement sont exécutés pendant la phase de
+[\_bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling).
+Remarquez ce qu'il se passe si vous tapez quelque chose dans l'`<input>` de cet exemple — le
+gestionnaire "intérieur" est joué en premier, puisque l'évènement "bubble" depuis la cible vers
+la racine du document, suivi par le gestionnaire "extérieur".
 
-Sometimes, you want handlers to run during the _capture_ phase instead. Add `capture` to the end of the event name:
+Parfois, vous voulez que les gestionnaires soient joués plutôt pendant la phase de _capture_.
+Ajoutez `capture` à la fin du nom de l'évènement :
 
 ```svelte
 /// file: App.svelte
@@ -13,4 +18,5 @@ Sometimes, you want handlers to run during the _capture_ phase instead. Add `cap
 </div>
 ```
 
-Now, the relative order is reversed. If both capturing and non-capturing handlers exist for a given event, the capturing handlers will run first.
+Désormais, l'ordre relatif est inversé. Si des gestionnaires de capture et de non-capture existent
+en même temps pour un même évènement, les gestionnaires de capture seront joués en premier.

apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-a/src/lib/App.svelte

@@ -4,6 +4,6 @@
 	let value = $state(0);
 </script>
 
-<p>The current value is {value}</p>
+<p>La valeur actuelle est {value}</p>
 
 <Stepper />

apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-b/src/lib/App.svelte

@@ -4,7 +4,7 @@
 	let value = $state(0);
 </script>
 
-<p>The current value is {value}</p>
+<p>La valeur actuelle est {value}</p>
 
 <Stepper
 	increment={() => value += 1}

apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md

@@ -1,8 +1,9 @@
 ---
-title: Component events
+title: Évènements de composant
 ---
 
-You can pass event handlers to components like any other prop. In `Stepper.svelte`, add `increment` and `decrement` props...
+Vous pouvez passer des gestionnaires d'évènement aux composants comme n'importe quelle autre prop.
+Dans `Stepper.svelte`, ajoutez les props `increment` et `decrement`...
 
 ```svelte
 /// file: Stepper.svelte
@@ -11,15 +12,15 @@ You can pass event handlers to components like any other prop. In `Stepper.svelt
 </script>
 ```
 
-...and wire them up:
+... et connectez les :
 
 ```svelte
 /// file: Stepper.svelte
 <button +++onclick={decrement}+++>-1</button>
 <button +++onclick={increment}+++>+1</button>
 ```
 
-In `App.svelte`, define the handlers:
+Dans `App.svelte`, définissez les gestionnaires :
 
 ```svelte
 <Stepper

apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-a/src/lib/BigRedButton.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <button>
-	Push
+	Appuyer
 </button>
 
 <style>

apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-b/src/lib/BigRedButton.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <button {...props}>
-	Push
+	Appuyer
 </button>
 
 <style>

apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/index.md

@@ -1,8 +1,10 @@
 ---
-title: Spreading events
+title: Étaler les évènements
 ---
 
-We can also [spread](spread-props) event handlers directly onto elements. Here, we've defined an `onclick` handler in `App.svelte` — all we need to do is pass the props to the `<button>` in `BigRedButton.svelte`:
+Nous pouvons aussi ["étaler" (_spread_)](spread-props) les gestionnaires d'évènements sur les
+éléments. Ici, nous avons défini un gestionnaire `onclick` dans `App.svelte` — tout ce qu'il reste à
+faire est de passer les props au `<button>` dans `BigRedButton.svelte` :
 
 ```svelte
 /// file: BigRedButton.svelte

apps/svelte.dev/content/tutorial/01-svelte/05-events/index.md

@@ -1,5 +1,5 @@
 ---
-title: Events
+title: Évènements
 scope: { 'prefix': '/src/lib/', 'name': 'src' }
 focus: /src/lib/App.svelte
 ---