In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onclick

onclick event | click event

Browser support:

Occurs when the user clicks on an element.

The default actions for the onclick event are different depending on the type of the element on which the event has occurred. For example, if an onclick event occurs on an input:checkbox or input:radio element, the browser changes the checked state of the element. If an onclick event occurs on an anchor element, the browser loads the document specified by the anchor element's href property.

The onclick event is cancelable, if you cancel it, the default action is not performed.

The onclick event does not fire for right mouse clicks as well. If you want to detect when the user presses or releases a mouse button over an element, use the onmousedown and onmouseup events.

The onclick event is fired twice for a double click in Firefox, Opera, Google Chrome and Safari and only once in Internet Explorer. If you want to detect when the user double clicks on an element, use the ondblclick event instead.

How to register:

In HTML:

In JavaScript:

object.onclick = handler;

object.addEventListener ("click", handler, useCapture);

9

object.attachEvent ("onclick", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	Yes
Cancelable	Yes
Event object	MouseEvent

Actions that invoke the onclick event:

Pressing and releasing the left mouse button (or the middle mouse button in Internet Explorer) over an element.
Pressing the ENTER or SPACE key in a form control or an anchor element.
Pressing an access key for a form control element.
Invoking the click method on an element.

The order of events related to the onclick event:

Action	Event order
Pressing and releasing the left mouse button over an element.	onmousedown onmouseup onclick
Pressing an access key.	onclick onkeyup
If the user press the ENTER key.	onkeydown onkeypress onclick onkeyup
If the user press the SPACE key.	onkeydown onkeypress onkeyup onclick

Example HTML code 1:

This example illustrates the use of the onclick event:

<head>
    <script type="text/javascript">
        function OnClickButton () {
            alert ("You clicked on the button!");
        }
    </script>
</head>
<body>
    <button onclick="OnClickButton ()">Click on me!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to detect when the checked state of a input:checkbox element is changed:

<head>
    <script type="text/javascript">
        function OnChangeCheckbox (checkbox) {
            if (checkbox.checked) {
                alert ("The check box is checked.");
            }
            else {
                alert ("The check box is not checked.");
            }
        }
    </script>
</head>
<body>
    Toggle the checked state of the following checked box:<br /><br />
    <input type="checkbox" onclick="OnChangeCheckbox (this)" id="myCheckbox" />
    <label for="myCheckbox">Sample check box</label>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to detect when the selection has changed in a input:radio group:

<head>
    <script type="text/javascript">
        function OnChangeRadio (radio) {
            alert ("The " + radio.value + " radio is selected.");
        }
    </script>
</head>
<body>
    Select your sex:<br /><br />
    <input type="radio" name="sex" id="radio_female" value="female" onclick="OnChangeRadio (this)" /> 
    <label for="radio_female">female</label>
    <br />
    <input type="radio" name="sex" id="radio_male" value="male" onclick="OnChangeRadio (this)" /> 
    <label for="radio_male">male</label>
</body>