[CRON] sync translated content

1 files changed, 75 insertions, 0 deletions

diff --git a/files/fr/orphaned/web/api/document_object_model/events/index.html b/files/fr/orphaned/web/api/document_object_model/events/index.html
new file mode 100644
index 0000000000..7e3d544c5a
--- /dev/null
+++ b/files/fr/orphaned/web/api/document_object_model/events/index.html
@@ -0,0 +1,75 @@
+---
+title: Les évènements et le DOM
+slug: orphaned/Web/API/Document_Object_Model/Events
+tags:
+  - API
+  - DOM
+  - Guide
+  - évènements
+translation_of: Web/API/Document_Object_Model/Events
+original_slug: Web/API/Document_Object_Model/Events
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>Ce chapitre décrit le modèle d'événement DOM. L'interface <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> elle-même est décrite, ainsi que les interfaces pour l'enregistrement des évènements sur les noeuds dans le DOM, les <a href="https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener">écouteurs d'évènements</a> et d'autres exemples montrant les relations des différentes interfaces d'évènements entre elles.</p>
+
+<p>Il existe un excellent diagramme qui explique clairement les trois phases du flux d'évènements à travers le DOM dans le <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">document sur les évènements DOM Niveau 3</a>.</p>
+
+<p>Voir aussi l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements">exemple 5 : Propagation des évènements</a> dans le chapitre "Exemples" pour des exemples détaillés sur le déplacement des évènements à travers le DOM.</p>
+
+<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Enregistrement des écouteurs d'évènements</h2>
+
+<p>Il y a 3 moyens d'enregistrer les gestionnaires d'évènements pour un élément DOM.</p>
+
+<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
+
+<pre class="brush: js">// Supposons que myButton est un élément de bouton
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+</pre>
+
+<p>C'est la méthode à utiliser dans les pages web modernes.</p>
+
+<p>Note : Internet Explorer 6-8 ne prend pas en charge cette méthode, il offre une API similaire {{domxref("EventTarget.attachEvent")}} à la place. Pour la compatibilité entre navigateurs, utilisez l'une des nombreuses bibliothèques JavaScript disponibles.</p>
+
+<p>Plus de détails peuvent être trouvés sur la page de référence {{domxref("EventTarget.addEventListener")}}.</p>
+
+<h3 id="HTML_attribute" name="HTML_attribute"><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">attribut HTML</a></h3>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello world!')"&gt;
+</pre>
+
+<p>Le code JavaScript de l'attribut est passé à l'objet évènement par le paramètre <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">La valeur renvoyée est traitée d'une façon spéciale décrite dans la spécification HTML</a>.</p>
+
+<p>Ce moyen devrait être évité. Cela rend le balisage plus grand et moins lisible. Les aspects de contenu / structure et comportement ne sont pas bien séparés, rendant un bogue plus difficile à trouver.</p>
+
+<h3 id="DOM_element_properties" name="DOM_element_properties">Propriétés d'un élément DOM</h3>
+
+<pre class="brush: js">// Supposons que myButton est un élément de bouton
+myButton.onclick = function(event){alert('Hello world');};
+</pre>
+
+<p>La fonction peut être définie pour prendre un paramètre d'<code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">La valeur renvoyée est traitée de façon spéciale décrite dans la spécification HTML</a>.</p>
+
+<p>Le problème avec cette méthode est qu'un seul gestionnaire peut être défini par élément et par évènement.</p>
+
+<h2 id="Accès_aux_interfaces_d'évènements">Accès aux interfaces d'évènements</h2>
+
+<p>Les gestionnaires d'évènements peuvent être attachés à divers objets y compris les éléments DOM, le document, l'<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux">objet fenêtre</a>, etc. Lorsqu'un évènement se produit, un objet évènement est créé et passé séquentiellement aux écouteurs d'évènements.</p>
+
+<p>L'interface {{domxref("Event")}} est accessible à partir de la fonction gestionnaire, via l'objet événement passé en premier argument. L'exemple simple suivant montre comment un objet d'événement est transmis à la fonction de gestionnaire d'événements et peut être utilisé à partir d'une telle fonction.</p>
+
+<pre class="brush: js">function foo(evt) {
+  // le paramètre evt est automatiquement assigné à l'objet évènement
+  alert(evt);
+}
+table_el.onclick = foo;
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction au DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Les_%C3%A9v%C3%A8nements_et_le_DOM">Les évènements et le DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li>
+</ul>