GlobalEventHandlers.onclick

  • Revision slug: DOM/element.onclick
  • Revision title: element.onclick
  • Revision id: 49725
  • Created:
  • Creator: Ms2ger
  • Is current revision? No
  • Comment HTML5; 3 words added, 4 words removed

Revision Content

{{ DomRef() }}

Summary

The onclick property returns the onClick event handler code on the current element.

Syntax

element.onclick = functionRef;

where functionRef is a function - often a name of a function declared elsewhere or a function expression. See Core JavaScript 1.5 Reference:Functions for details.

Example

<!doctype html>
<html>
<head>
<title>onclick event example</title>
<script type="text/javascript">
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()
 {
 alert("onclick Event detected!")
 }
</script>
<style type="text/css">
#foo {
border: solid blue 2px;
}
</style>
</head>
<body onload="initElement()";>
<span id="foo">My Event Element</span>
<p>click on the above element.</p>
</body>
</html>

Or you can use an anonymous function, like this:

p.onclick = function() { alert("moot!"); };

Not going to confuse poor readers with this. You could also use a the Function constructor: <pre> p.onclick = Function( "alert('moot!')" ); </pre>

Notes

The click event is raised when the user clicks on an element. The click event will occur after the mousedown and mouseup events.

Only one onclick handler can be assigned to an object at a time with this property. You may be inclined to use the addEventListener method instead, since it is more flexible and part of the DOM Events specification.

Specification

Defined in HTML5.

{{ languages( { "fr": "fr/DOM/element.onclick", "pl": "pl/DOM/element.onclick" } ) }}

Revision Source

<p>
{{ DomRef() }}
</p>
<h3 name="Summary">Summary</h3>
<p>The <b>onclick</b> property returns the onClick event handler code on the current element.
</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval"><i>element</i>.onclick = <i>functionRef</i>;
</pre>
<p>where <i>functionRef</i> is a function - often a name of a function declared elsewhere or a <i>function expression</i>. See <a href="en/Core_JavaScript_1.5_Reference/Functions">Core JavaScript 1.5 Reference:Functions</a> for details.
</p>
<h3 name="Example">Example</h3>
<pre>&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(); or showAlert(param); will NOT work here.
 // Must be a reference to a function name, not a function call.
 p.onclick = showAlert;
 };

function showAlert()
 {
 alert("onclick Event detected!")
 }
&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;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>Or you can use an anonymous function, like this:</p>
<pre>p.onclick = function() { alert("moot!"); };
</pre>
<p class="comment">Not going to confuse poor readers with this. You could also use a the Function constructor: &lt;pre&gt; p.onclick = Function( "alert('moot!')" ); &lt;/pre&gt;</p><h3 name="Notes"> Notes </h3>
<p>The click event is raised when the user clicks on an element. The click event will occur after the mousedown and mouseup events.
</p><p>Only one onclick handler can be assigned to an object at a time with this property. You may be inclined to use the <a href="en/DOM/element.addEventListener"> addEventListener</a> method instead, since it is more flexible and part of the DOM Events specification.
</p>
<h3 name="Specification">Specification</h3>
<p>Defined in <a class=" external" href="http://www.whatwg.org/html5/#handler-onclick" title="http://www.whatwg.org/html5/#handler-onclick">HTML5</a>.</p>
<p>{{ languages( { "fr": "fr/DOM/element.onclick", "pl": "pl/DOM/element.onclick" } ) }}</p>
Revert to this revision