files/fr/web/api/globaleventhandlers/onclick/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

---
title: element.onclick
slug: Web/API/GlobalEventHandlers/onclick
translation_of: Web/API/GlobalEventHandlers/onclick
---
<p>{{ ApiRef() }}</p>

<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>

<p>La propriété <strong>onclick</strong> représente le gestionnaire d'évènement onClick de l'élément courant.</p>

<h3 id="Syntaxe">Syntaxe</h3>

<p><code><em>element</em>.onclick = <em>functionRef</em></code></p>

<p>où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p>

<p>Le paramètre fourni au gestionnaire d'évènement <em>functionRef</em> lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}.</p>

<h3 id="Exemple">Exemple</h3>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;onclick event example&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function initElement()
{
  var p = document.getElementById("foo");
  // NOTE: showAlert(); ou showAlert(param); NE fonctionne PAS ici.
  // Il faut fournir une valeur de type <em><strong>function</strong></em> (nom de fonction déclaré ailleurs ou declaration en ligne de fonction).
  p.onclick = showAlert;
};

function showAlert()
{
  alert("Evènement de click détecté");
}
&lt;/script&gt;
&lt;style type="text/css"&gt;
#foo {
border: solid blue 2px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body onload="initElement();"&gt;
&lt;span id="foo"&gt;Mon Span à cliquer&lt;/span&gt;
&lt;p&gt;Cliquez sur l'élément ci-dessus.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>Vous pouvez aussi utiliser la syntaxe des fonctions déclarées en ligne, anonymes ou non.</p>

<pre class="brush: js">// affectation de fonction anonyme declarée en ligne
p.onclick = function() { alert("moot!"); };
</pre>

<h3 id="Notes">Notes</h3>

<p>L'évènement <code>click</code> est déclenché lorsque l'utilisateur clique sur un élément.</p>

<p>Avec cette syntaxe un seul gestionnaire d'évènement click peut être assigné à un élement . Pour gérer plusieurs fonctions gestionnaires d'évènements click sur un même élément, utilisez {{ domxref("EventTarget.addEventListener()") }} qui fait partie de la spécification DOM Events.</p>

<h3 id="Sp.C3.A9cification">Spécification</h3>

<p>Defini en <a href="http://w3c.github.io/html/webappapis.html#dom-globaleventhandlers-onclick">HTML</a>.</p>