We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

Our volunteers haven't translated this article into Bahasa Indonesia yet. Join us and help get the job done!
You can also read the article in English (US).


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

Note: When using the click event to trigger an action, also consider adding this same action to the keydown event, to allow the use of that same action by people who don't use a mouse or a touch screen.


element.onclick = functionRef;

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

The single argument passed to the specified event handler function is a MouseEvent object. Within the handler, this will be the element upon which the event was triggered.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>onclick event example</title>
      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!");
      #foo {
        border: solid blue 2px;
  <body onload="initElement();">
    <span id="foo">My Event Element</span>
    <p>click on the above element.</p>

Or you can use an anonymous function, like this:

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


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 click handler can be assigned to an object at a time with this property. You may be inclined to use the EventTarget.addEventListener() method instead, since it is more flexible and part of the DOM Events specification.


Specification Status Comment
HTML Living Standard
The definition of 'onclick' in that specification.
Living Standard  

Browser Compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) ? ? ? ?
Feature Android Android Webview Chrome for Android Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ? ? ? ?

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: erikadoyle,