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

---
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>

{{Compat("api.GlobalEventHandlers.onclick")}}