files/fr/web/api/document_object_model/events/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

---
title: Les évènements et le DOM
slug: 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/Les_évènements_et_le_DOM
---
<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>