correction gestionnaire events

Author: Ti Bretin

src/v2/guide/events.md

@@ -1,19 +1,19 @@
 ---
-title: Event Handling
+title: Gestionnaire des événements
 type: guide
 order: 9
 ---
 
-## Ecoute des événements
+## Ecoute des événements  
 
-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.
+Nous pouvons utiliser l'instruction `v-on` pour écouter les événements du DOM afin d'éxécuter du JavaScript lorsque ces événements surviennent.
 
-Par example:
+Par exemple:
 
 ``` html
 <div id="example-1">
   <button v-on:click="counter += 1">Add 1</button>
-  <p>Le boutton ci-dessus à été cliqué {{ counter }} fois.</p>
+  <p>Le bouton ci-dessus a été cliqué {{ counter }} fois.</p>
 </div>
 ```
 ``` js
@@ -25,12 +25,12 @@ var example1 = new Vue({
 })
 ```
 
-Resultat:
+Résultat:
 
 {% raw %}
 <div id="example-1" class="demo">
   <button v-on:click="counter += 1">Add 1</button>
-  <p>Le boutton ci-dessus à été cliqué {{ counter }} fois.</p>
+  <p>Le bouton ci-dessus a été cliqué {{ counter }} fois.</p>
 </div>
 <script>
 var example1 = new Vue({
@@ -42,15 +42,15 @@ var example1 = new Vue({
 </script>
 {% endraw %}
 
-## Gestionnaire de Méthodes pour "les Evénements"
+## Les méthodes de gestion d'évènement"
 
-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.      
+La logique pour beaucoup des gestionnaires d'événements sera très certainement plus complexe, par conséquence, garder votre JavaScript dans la valeur de l'attribut v-on ne sera tout simplement pas possible. C'est pourquoi v-on peut aussi accepter le nom d'une méthode que vous voudriez appeler.
 
-For exemple:
+Par exemple:
 
 ``` html
 <div id="example-2">
-  <!-- `greet` est le nom de la méthode defini ce-dessous-->
+  <!-- `greet` est le nom de la méthode definie ci-dessous-->
   <button v-on:click="greet">Greet</button>
 </div>
 ```
@@ -61,28 +61,28 @@ var example2 = new Vue({
   data: {
     name: 'Vue.js'
   },
-  // defini les méthodes sous l'objet `methods`
+  // Définissez les méthodes de l'objet
   methods: {
     greet: function (event) {
-      // `this` à l'intérieur de l'objet methods se réfère à l'instance de Vue.
+      // `this` fait référence à l'instance de Vue à l'intérieur de `methods`..
       alert('Hello ' + this.name + '!')
-      // `event` est un événement natif du DOM
+      // `event` est l'événement natif du DOM
       if (event) {
         alert(event.target.tagName)
       }
     }
   }
 })
 
-// vous pouvez également invoqué ces méthodes en Javscript
-example2.greet() // -> 'Hello Vue.js!'
+// vous pouvez également invoquer ces méthodes en JavaScript
+2.greet() // -> 'Hello Vue.js!'
 ```
 
-Resultat:
+Résultat :
 
 {% raw %}
 <div id="example-2" class="demo">
-  <button v-on:click="greet">Salutation</button>
+  <button v-on:click="greet">Dire bonjour</button>
 </div>
 <script>
 var example2 = new Vue({
@@ -102,9 +102,9 @@ var example2 = new Vue({
 </script>
 {% endraw %}
 
-## Gestionnaire de Méthodes "En-ligne":
+## Méthode d'écoute dans les attributs :
 
-Au lieu de lier directement la méthode à un nom, nous pouvons également utiliser la méthode avec une declaration Javascript dans la ligne:
+Au lieu de lier directement la méthode par son nom dans l'attribut, nous pouvons également utiliser la méthode avec une instruction JavaScript :
 
 ``` html
 <div id="example-3">
@@ -123,7 +123,7 @@ new Vue({
 })
 ```
 
-Result:
+Résultat:
 {% raw %}
 <div id="example-3" class="demo">
   <button v-on:click="say('hi')">Say hi</button>
@@ -141,10 +141,10 @@ new Vue({
 </script>
 {% endraw %}
 
-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`:
+Parfois nous avons également besoin d'accéder à l'événement original du DOM depuis l'instruction dans l'attribut. Vous pouvez le passer à une méthode en utilisant la variable spéciale $event :
 
 ``` html
-<button v-on:click="avertissement('Le formulaire ne peut être soumit pour le moment.', $event)">Soumettre</button>
+<button v-on:click="warn('Le formulaire ne peut être soumis pour le moment.', $event)">Soumettre</button>
 ```
 
 ``` js
@@ -158,11 +158,11 @@ methods: {
 }
 ```
 
-## Modifieurs "Events"
-
-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>
+## Modificateurs d'événements
 
-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.
+C'est un besoin courant que de faire appel ā `event.preventDefault()` ou `event.stopPropagation()` à l'intérieur d'une déclaration de gestionnaire d'évènement. Bien que nous puissions réaliser ceci aisément à l'intérieur de " Methods " ,  il serait préférable que les méthodes restent purement dediées à la logique des données au lieu d'avoir à prendre en charge les événements du DOM en détails.
+``
+Pour résoudre ce problème, Vue propose des modificateurs d'événement pour `v-on`. Faire appel à ces modificateurs se fait grâce aux extensions d'instruction, ceux-ci commençant par un point.
 
 - `.stop`
 - `.prevent`
@@ -171,44 +171,44 @@ Pour resoudre ce problème, Vue propose des modifieurs d'événement à `v-on`.
 - `.once`
 
 ``` html
-<!-- la propagation de l'événement du clic sera stoppé -->
-<a v-on:click.stop="faisCeci"></a>
+<!-- la propagation de l'événement du clic sera stoppée -->
+<a v-on:click.stop="doThis"></a>
 
-<!-- l'événement submit, ne rechargera plus la page -->
-<form v-on:submit.prevent="Soumettre"></form>
+<!-- l'événement « submit », ne rechargera plus la page -->
+<form v-on:submit.prevent="onSubmit"></form>
 
-<!-- les modifieurs peuvent être chainés -->
-<a v-on:click.stop.prevent="faisCela"></a>
+<!-- les modificateurs peuvent être chainés -->
+<a v-on:click.stop.prevent="doThat"></a>
 
-<!-- seulement le modifieur -->
+<!-- seulement le modificateur -->
 <form v-on:submit.prevent></form>
 
-<!-- utilise le mode "capture" lorsque l'événement d'écoute est ajouté -->
-<div v-on:click.capture="faisCeci">...</div>
+<!-- utilise le mode « capture » lorsque l'événement d'écoute est ajouté -->
+<div v-on:click.capture="doThis">...</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>
+<!-- seulement déclanché si l'instruction « event.target » est l'élément lui même.-->
+<!-- c-à-d : ne s'applique pas aux éléments "enfant" -->
+<div v-on:click.self="doThat">...</div>
 ```
 
 > New in 2.1.4
 
 ``` html
-<!-- l'événement "click" sera déclenché au moins une fois -->
+<!-- l'événement « click » sera déclenché au moins une fois -->
 <a v-on:click.once="faisCeci"></a>
 ```
 
-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.
+Au contraire des autres modificateurs, qui sont exclusifs aux événements natifs du DOM, le modificateur `.once` peut également être utilisé pour les [événements  des composants](components.html#Using-v-on-with-Custom-Events). Si vous n'avez pas encore lu la section concernant les composants, ne vous en inquiétez pas pour le moment.
 
-## 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`:
+## Modificateurs "key" (Touches)
+Lorsque nous écoutons les événements du clavier, nous avons régulièrement besoin de s'assurer des codes des touches. Vue permet également d'ajouter un modificateur de touches pour `v-on`:
 
 ``` html
-<!-- faire appel à vm.submit() quand le code touche est 13 seulement -->
+<!-- faire appel à « vm.submit() » uniquement quand le code de la touche est 13 -->
 <input v-on:keyup.13="submit">
 ```
 
-Rappelez vous que les codes des touches sont disputés, c'est pourquoi Vue propose des alias pour ceux courament employés.
+Se rappeler de tous les codes des touches est compliqué, c'est pourquoi Vue propose des alias pour les touches les plus couramment employées :
 
 ``` html
 <!-- même exemple que le précédent -->
@@ -218,7 +218,7 @@ Rappelez vous que les codes des touches sont disputés, c'est pourquoi Vue propo
 <input @keyup.enter="submit">
 ```
 
-Voici une liste complète des raccourci clavier "modifieurs"
+Voici la liste complète des raccourcis de modificateur pour les touches :
 
 - `.enter`
 - `.tab`
@@ -230,25 +230,25 @@ Voici une liste complète des raccourci clavier "modifieurs"
 - `.left`
 - `.right`
 
-Vous pouvez également [definir des raccourci personnalisé pour vos "modifieurs" ](../api/#keyCodes) grâce à l'objet global `config.keyCodes`:
+Vous pouvez également [definir des raccourcis personnalisés pour vos modificateurs ](../api/#keyCodes) grâce à l'objet global `config.keyCodes`:
 
 ``` js
 // active v-on:keyup.f1
 Vue.config.keyCodes.f1 = 112
 ```
 
-## Modifieurs "key" (Touches)
+## Modificateurs de touches
 
 > New in 2.1.0
 
-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é :
+Vous pouvez utiliser les modificateurs suivants pour déclancher un événement du clavier ou de la souris seulement lorsque la touche du modificateur correspondant est appuyé :
 
 - `.ctrl`
 - `.alt`
 - `.shift`
 - `.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".
+> 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 ».
 
 Par exemple:
 
@@ -262,11 +262,11 @@ Par exemple:
 
 ## Pourquoi des écoutes dans le code HTML ?
 
-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` :
+Vous pouriez être preoccupé que tous ces événements d'écoutes viole la bonne vieille règle de la séparation des préoccupations.
+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. Il est plus facile de localiser l'implementation des functions dans le gestionnaire de code JS en survolant le code HTML.
+1. Il est plus facile de localiser l'implementation des fonctions dans le gestionnaire de code JS en survolant le code HTML.
 
-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.
+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. Quand un "ViewModel est detruit, tout les evenements d'ecoutes sont automatiquenemt retiré". Vous n'aveez pas à vous soucier de le faire vous meme.
+3. Quand un « ViewModel » est detruit, tout les evenements d'ecoutes sont automatiquenemt retiré. Vous n'avez pas à vous soucier de le faire vous-même.