events.md

src/v2/guide/events.md

@@ -4,16 +4,16 @@ type: guide
 order: 9
 ---
 
-## Listening to Events
+## Ecoute des événements
 
-<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p>We can use the `v-on` directive to listen to DOM events and run some JavaScript when they're triggered.
+Nous pouvons utiliser l'instruction `v-on` pour écouter les événements du DOM afin d'éxécuter des scripts Javascript lorsque ces événements surviennent.
 
-For example:
+Par example:
 
 ``` html
 <div id="example-1">
   <button v-on:click="counter += 1">Add 1</button>
-  <p>The button above has been clicked {{ counter }} times.</p>
+  <p>Le boutton ci-dessus à été cliqué {{ counter }} fois.</p>
 </div>
 ```
 ``` js
@@ -25,12 +25,12 @@ var example1 = new Vue({
 })
 ```
 
-Result:
+Resultat:
 
 {% raw %}
 <div id="example-1" class="demo">
   <button v-on:click="counter += 1">Add 1</button>
-  <p>The button above has been clicked {{ counter }} times.</p>
+  <p>Le boutton ci-dessus à été cliqué {{ counter }} fois.</p>
 </div>
 <script>
 var example1 = new Vue({
@@ -42,15 +42,15 @@ var example1 = new Vue({
 </script>
 {% endraw %}
 
-## Method Event Handlers
+## Gestionnaire de Méthodes pour "les Evénements"
 
-The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the `v-on` attribute simply isn't feasible. That's why `v-on` can also accept the name of a method you'd like to call.
+La logique pour beaucoup des gestionnaires d'événements sera très certainement plus compliqué, par consequence, garder vos valeurs dans l'attribu `v-on` ne sera pas possible. C'est pour cette raison que `v-on` peut également accepter que vous nommiez vos méthodes comme vous le souhaitez.      
 
-For example:
+For exemple:
 
 ``` html
 <div id="example-2">
-  <!-- `greet` is the name of a method defined below -->
+  <!-- `greet` est le nom de la méthode defini ce-dessous-->
   <button v-on:click="greet">Greet</button>
 </div>
 ```
@@ -61,28 +61,28 @@ var example2 = new Vue({
   data: {
     name: 'Vue.js'
   },
-  // define methods under the `methods` object
+  // defini les méthodes sous l'objet `methods`
   methods: {
     greet: function (event) {
-      // `this` inside methods points to the Vue instance
+      // `this` à l'intérieur de l'objet methods se réfère à l'instance de Vue.
       alert('Hello ' + this.name + '!')
-      // `event` is the native DOM event
+      // `event` est un événement natif du DOM
       if (event) {
         alert(event.target.tagName)
       }
     }
   }
 })
 
-// you can invoke methods in JavaScript too
+// vous pouvez également invoqué ces méthodes en Javscript
 example2.greet() // -> 'Hello Vue.js!'
 ```
 
-Result:
+Resultat:
 
 {% raw %}
 <div id="example-2" class="demo">
-  <button v-on:click="greet">Greet</button>
+  <button v-on:click="greet">Salutation</button>
 </div>
 <script>
 var example2 = new Vue({
@@ -92,7 +92,7 @@ var example2 = new Vue({
   },
   methods: {
     greet: function (event) {
-      alert('Hello ' + this.name + '!')
+      alert('Bonjour ' + this.name + '!')
       if (event) {
         alert(event.target.tagName)
       }
@@ -102,9 +102,9 @@ var example2 = new Vue({
 </script>
 {% endraw %}
 
-## Methods in Inline Handlers
+## Gestionnaire de Méthodes "En-ligne":
 
-Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:
+Au lieu de lier directement la méthode à un nom, nous pouvons également utiliser la méthode avec une declaration Javascript dans la ligne:
 
 ``` html
 <div id="example-3">
@@ -141,28 +141,28 @@ new Vue({
 </script>
 {% endraw %}
 
-Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable:
+Parfois, nous avons également besoin, avec les déclarations en ligne, d'accéder aux événements du DOM. Vous pouvez réaliser ceci en utilisant la variable speciale `$event`:
 
 ``` html
-<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
+<button v-on:click="avertissement('Le formulaire ne peut être soumit pour le moment.', $event)">Soumettre</button>
 ```
 
 ``` js
 // ...
 methods: {
-  warn: function (message, event) {
+  avertissement: function (message, event) {
     // now we have access to the native event
     if (event) event.preventDefault()
     alert(message)
   }
 }
 ```
 
-## Event Modifiers
+## Modifieurs "Events"
 
-It is a very common need to call `event.preventDefault()` or `event.stopPropagation()` inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.
+C'est un besoin courant que de faire appel ā `event.preventDefault()` ou `event.stopPropagation()` à l'intérieur d'une déclaration d'événements. Bien que nous puissions realiser ceci aisément à l'intérieur de "Methods", il aurait été préférable que "Methods" reste purement dedié à la logique des données au lieu d'avoir à prendre en charge les éléments du DOM>
 
-To address this problem, Vue provides **event modifiers** for `v-on`. Recall that modifiers are directive postfixes denoted by a dot.
+Pour resoudre ce problème, Vue propose des modifieurs d'événement à `v-on`. Evoquer ces modifieurs se fait grâce aux extensions d'instruction, ceux-ci commençant par un point.
 
 - `.stop`
 - `.prevent`
@@ -171,87 +171,86 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
 - `.once`
 
 ``` html
-<!-- the click event's propagation will be stopped -->
-<a v-on:click.stop="doThis"></a>
+<!-- la propagation de l'événement du clic sera stoppé -->
+<a v-on:click.stop="faisCeci"></a>
 
-<!-- the submit event will no longer reload the page -->
-<form v-on:submit.prevent="onSubmit"></form>
+<!-- l'événement submit, ne rechargera plus la page -->
+<form v-on:submit.prevent="Soumettre"></form>
 
-<!-- modifiers can be chained -->
-<a v-on:click.stop.prevent="doThat"></a>
+<!-- les modifieurs peuvent être chainés -->
+<a v-on:click.stop.prevent="faisCela"></a>
 
-<!-- just the modifier -->
+<!-- seulement le modifieur -->
 <form v-on:submit.prevent></form>
 
-<!-- use capture mode when adding the event listener -->
-<div v-on:click.capture="doThis">...</div>
+<!-- utilise le mode "capture" lorsque l'événement d'écoute est ajouté -->
+<div v-on:click.capture="faisCeci">...</div>
 
-<!-- only trigger handler if event.target is the element itself -->
-<!-- i.e. not from a child element -->
-<div v-on:click.self="doThat">...</div>
+<!-- seulement déclanché si l'instruction "event.target" est l'élément lui même.-->
+<!-- note : ne s'applique pas aux éléments "enfant" -->
+<div v-on:click.self="faisCeci">...</div>
 ```
 
 > New in 2.1.4
 
 ``` html
-<!-- the click event will be triggered at most once -->
-<a v-on:click.once="doThis"></a>
+<!-- l'événement "click" sera déclenché au moins une fois -->
+<a v-on:click.once="faisCeci"></a>
 ```
 
-Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](components.html#Using-v-on-with-Custom-Events). If you haven't read about components yet, don't worry about this for now.
-
-## Key Modifiers
+Au contraire des autres modifieurs, qui sont exclusifs aux événement natif du DOM, le modifieur `.once` peut également être utilisé pour les [component events](components.html#Using-v-on-with-Custom-Events). Si vous n'avez pas encore lu la section concernant les composants, ne vous en inquitez pas pour le moment.
 
-When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for `v-on` when listening for key events:
+## Modifieurs "key" (Touches)
+Lorsque nous écoutons les événements du clavier, nous avons regulièrement besoin de s'assurer des codes des touches. Vue permet également d'ajouter un modifieur de touches pour `v-on`:
 
 ``` html
-<!-- only call vm.submit() when the keyCode is 13 -->
+<!-- faire appel à vm.submit() quand le code touche est 13 seulement -->
 <input v-on:keyup.13="submit">
 ```
 
-Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used keys:
+Rappelez vous que les codes des touches sont disputés, c'est pourquoi Vue propose des alias pour ceux courament employés.
 
 ``` html
-<!-- same as above -->
+<!-- même exemple que le précédent -->
 <input v-on:keyup.enter="submit">
 
-<!-- also works for shorthand -->
+<!-- fonctionne également pour les raccourcis -->
 <input @keyup.enter="submit">
 ```
 
-Here's the full list of key modifier aliases:
+Voici une liste complète des raccourci clavier "modifieurs"
 
 - `.enter`
 - `.tab`
-- `.delete` (captures both "Delete" and "Backspace" keys)
+- `.delete` (fonctionne pour les touches "Suppression" et "retour-arrière")
 - `.esc`
 - `.space`
 - `.up`
 - `.down`
 - `.left`
 - `.right`
 
-You can also [define custom key modifier aliases](../api/#keyCodes) via the global `config.keyCodes` object:
+Vous pouvez également [definir des raccourci personnalisé pour vos "modifieurs" ](../api/#keyCodes) grâce à l'objet global `config.keyCodes`:
 
 ``` js
-// enable v-on:keyup.f1
+// active v-on:keyup.f1
 Vue.config.keyCodes.f1 = 112
 ```
 
-## Modifier Keys
+## Modifieurs "key" (Touches)
 
 > New in 2.1.0
 
-You can use the following modifiers to trigger mouse or keyboard event listeners only when the corresponding modifier key is pressed:
+Vous pouvez utiliser les modifieurs suivants pour déclancher un événement du clavier ou de la souris seulement lorsque la touche du modifieur est appuyé :
 
 - `.ctrl`
 - `.alt`
 - `.shift`
 - `.meta`
 
-> Note: On Macintosh keyboards, meta is the command key (⌘). On Windows keyboards, meta is the windows key (⊞). On Sun Microsystems keyboards, meta is marked as a solid diamond (◆). On certain keyboards, specifically MIT and Lisp machine keyboards and successors, such as the Knight keyboard, space-cadet keyboard, meta is labeled “META”. On Symbolics keyboards, meta is labeled “META” or “Meta”.
+> Note: Sur les claviers Macintosh, meta est la touche commande (⌘). Sur Windows, meta est la touche windows (⊞). Sur les claviers Sun Microsystems, meta est symbolisé par un diamant plein (◆). Sur certain clavier, spécifiquement sur les claviers des machines MIT et Lisp et leurs successeurs, comme le clavier "Knight" et "space-cadet", meta est ecrit "META". Sur les claviers Symboliques, meta est etiqueté "META" ou "Meta".
 
-For example:
+Par exemple:
 
 ```html
 <!-- Alt + C -->
@@ -261,12 +260,13 @@ For example:
 <div @click.ctrl="doSomething">Do something</div>
 ```
 
-## Why Listeners in HTML?
+## Pourquoi des écoutes dans le code HTML ?
 
-You might be concerned that this whole event listening approach violates the good old rules about "separation of concerns". Rest assured - since all Vue handler functions and expressions are strictly bound to the ViewModel that's handling the current view, it won't cause any maintenance difficulty. In fact, there are several benefits in using `v-on`:
+Vous pouriez être preoccupé que tous ces événements d'écoutes viole la bonne vieille règle de la separation des problèmes.
+Rassurez-vous - depuis que le gestionnaire de fonctions et d'expressions est strictement lié à "ViewModel"  qui gère la vue courante, cela ne causera aucune difficulté de maintenance. En realité, il y a plusieurs bénéfices à utiliser `v-on` :
 
-1. It's easier to locate the handler function implementations within your JS code by simply skimming the HTML template.
+1. Il est plus facile de localiser l'implementation des functions dans le gestionnaire de code JS en survolant le code HTML.
 
-2. Since you don't have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test.
+2. Comme vous n'avez pas à attacher manuellement les écoutes dans votre JS, le code du "ViewModel" peut-être purement logique et sans DOM. Ceci rend plus facile les tests.
 
-3. When a ViewModel is destroyed, all event listeners are automatically removed. You don't need to worry about cleaning it up yourself.
+3. Quand un "ViewModel est detruit, tout les evenements d'ecoutes sont automatiquenemt retiré". Vous n'aveez pas à vous soucier de le faire vous meme.