files/es/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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

---
title: GlobalEventHandlers.onclick
slug: Web/API/GlobalEventHandlers/onclick
translation_of: Web/API/GlobalEventHandlers/onclick
---
<div>
<div>{{ ApiRef("HTML DOM") }}</div>
</div>


<p>La propiedad <strong>onclick</strong> devuelve el manejador del evento <code>click</code> del elemento actual.</p>

<div class="note"><strong>Note:</strong> Cuando uses el evento <code>click</code> para ejecutar algo, considera agregar la misma acción al evento <code>keydown</code>, para permitirle el uso a personas que no usan mouse o pantalla táctil.</div>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

<pre class="syntaxbox"><var>element</var>.onclick = <var>functionRef</var>;
</pre>

<p>Donde <em>functionRef</em> es una función - muchas veces el nombre de la función está declarado ya en otro sitio o como una <em>expresión de la función</em> .Ver "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>" para más detalles.</p>

<p>el único argumento pasado a la función  manejador de evento especificamente {{domxref("MouseEvent")}} object. Dentro del manejador, <code>this</code> será el elemento sobre él  el evento ha sido invocado.</p>

<h2 id="Example" name="Example">Ejemplo</h2>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;onclick event example&lt;/title&gt;
    &lt;script&gt;
      function initElement() {
        var p = document.getElementById("foo");
        // NOTE: showAlert(); or showAlert(param); will NOT work here.
        // Must be a reference to a function name, not a function call.
        p.onclick = showAlert;
      };

      function showAlert(event) {
        alert("onclick Event detected!");
      }
    &lt;/script&gt;
    &lt;style&gt;
      #foo {
        border: solid blue 2px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="initElement();"&gt;
    &lt;span id="foo"&gt;My Event Element&lt;/span&gt;
    &lt;p&gt;click on the above element.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>O se puede usar una función anoníma, como esa:</p>

<pre class="brush:js">p.onclick = function(event) { alert("moot!"); };
</pre>

<h2 id="Notes" name="Notes">Notas</h2>

<p>El evento <code>click</code> se genera cuando el usuario hace clic en un elemento. El evento clic ocurrirá después de los eventos <code>mousedown</code> y <code>mouseup</code>.</p>

<p>Solo se puede asignar un controlador <code>click</code> a un objeto a la vez con esta propiedad. Puede que prefiera utilizar el método {{domxref ("EventTarget.addEventListener()")}} en su lugar, ya que es más flexible y forma parte de la especificación DOM Events.</p>

<h2 id="Specification" name="Specification">Especificación</h2>

<table class="spectable standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>