Fires when the user clicks the left mouse button on the object.

A click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is: mousedown, mouseup, click.

For example, if the user clicks the left mouse button, the onclick event for an object occurs only if the mouse pointer is over the object and both an onmousedown and an onmouseup event occur in order. if the user presses down in the object but moves the mouse pointer out of the object before releasing, no onclick event occurs.

The onclick event changes the value of a control in a group. This change initiates the event for the group, not for the individual control. For example, if the user clicks a radio button or check box in a group, the onclick event occurs after the onbeforeupdate and onafterupdate events for the control group.

If the user clicks an object that can receive the input focus but does not already have the focus, the onfocus event occurs for that object before the onclick event. If the user double-clicks the left mouse button in a control, an ondblclick event occurs immediately after the onclick event.

Although the onclick event is available on a large number of HTML elements, if a Web page is to be accesible to keyboard users, its use should be restricted to the A, INPUT, AREA, and BUTTON elements. These elements automatically allow keyboard access through the TAB key, making Web pages that use them accessible to keyboard users.

While event handlers in the Document Object Model do not receive parameters directly, the handler can query the event object for data.

Event Object Properties

The following examples demonstrate use of how the onclick event may be handled.

This example uses the event to trigger a function that detects the contents of the textbox and displays it in a dialog box.

 Show me 

This example uses the event object to gain information about the origin of the click, and cancels the default action if the onclick event is fired off an anchor.

Sample Code

<script language="JavaScript">
function clickIt ( ) {
   txtTag.value = window.event.srcElement.tagName;
   txtType.value = window.event.srcElement.type;
   // checks if the click occurred in an anchor, then cancels the event
   if (window.event.srcElement.tagName=="A"){
      window.event.returnValue = false;
   }
}
</script>

 Show me 

This example shows how to bind the onclick event to grouped controls.

Sample Code

<script language="JavaScript">
function getOpt ( ) {
   alert ( window.event.srcElement.value );
}
</script>

<div align=center>
<table>
<tr>
   <td><input type=radio name=optGroup id=sex
      value="Sex" onclick="getOpt()"></td>
   <td><label for=sex>Sex</label></td></tr>
<tr>
   <td><input type=radio name=optGroup id=drugs
      value="Drugs" onclick="getOpt()"></td>
   <td><label for=drugs>Drugs</label></td></tr>
<tr>
   <td><input type=radio name=optGroup id=r&r
      value="Rock and Roll" onclick="getOpt()"></td>
   <td><label for=r&r>Rock and Roll</label></td></tr>
</table>

 Show me 

click, ondblclick